Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2012, 13:14
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Адаптивный слайдер
Еще раз всем привет. Надеюсь я не утомлю вас вопросами.

Стоит преинтереснейшая задача. Необходимо сделать слайдер изображений. Алгоритм такой: изображение растягивается на весь экран. Если оно может влезть по ширине, но не может по высоте, то двигается вверх или вниз. Если изображение влезает по высоте, но не влезает по ширине, то двигаетсяя влева или вправо. Движение изображения происходит не полностью, а только на так, чтобы показать скрытую часть изображения (это мы подманиваем пользователя).

Т.е. пользователь сдвигает мышку в зону близ одного из краев области просмотри и наблюдает плавное движение картинки, а потом картинка плавно возвращается на место.



Демонстрационная гифка


Как такое вообще сделать? Принимается любой конструктивный бред.

Последний раз редактировалось ddale, 05.07.2012 в 14:05.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2012, 13:34
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

ddale,
Забацайте гиф анимацию итогового действия, вместе с курсором пользователя - имхо объяснения будут короче... или попросите кого нибудь пояснив задачу - иначе разбор полётов будет бесконечным,
Итоговая реализация в точном соотвествии с гифкой в разы кароче(как показывает практика
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2012, 13:41
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Deff,
Гифку нельзя. Потому что изображения будет вставлять пользователь и изображения будут и .jpg и .png. Да еще буду делать, чтобы при клике изображение перелистывались. Нужно универсальное решение. Или просто подсказка. Я совсем сбился. Думал сначала, сделать обертку под изображение с шириной в 110% и позиционирование в этой обертке самого изображения так, чтобы оно не влезало с обоих сторон. Но вариант гиблый..
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2012, 13:47
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

ddale,
Сообщение от ddale
Гифку нельзя.
Я про демонстрационную = по описанию долго вникать и корректировать
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2012, 14:04
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Deff,
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2012, 14:17
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

ddale,
Вродь понял про горизонталь - буду думать...

Зы - а вопрос такой: Начальная позиция изображения большего обрамлялки - по центру или по левому краю ?

Последний раз редактировалось Deff, 05.07.2012 в 14:19.
Ответить с цитированием
  #7 (permalink)  
Старый 05.07.2012, 14:28
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Deff,
Начальная позиция по центру.
Ответить с цитированием
  #8 (permalink)  
Старый 05.07.2012, 16:12
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Это? http://demos111.mootools.net/Scroller (нижний пример)
Ответить с цитированием
  #9 (permalink)  
Старый 05.07.2012, 17:41
Аватар для ddale
Аспирант
Отправить личное сообщение для ddale Посмотреть профиль Найти все сообщения от ddale
 
Регистрация: 04.07.2012
Сообщений: 50

Serg_pnz,
Вроде да. Только вот я не пойму как его встроить, чтобы он заработал. Я загрузил "MooTools Core 1.4.5 without compatibility" и подключил.
А также взял JS:
window.addEvent('domready', function(){
			var scroll1 = new Scroller('drag', {area: 150, velocity: 1});
			var scroll2 = new Scroller('mousemove', {area: 100, velocity: 1});
			
			// Drag
			$('drag').addEvent('mousedown', function() {
				this.setStyle('cursor', 'url(/demos/Scroller/closedhand.cur), move');
				scroll1.start();
			});
			$('drag').addEvent('mouseup', function() {
				this.setStyle('cursor', 'url(/demos/Scroller/openhand.cur), move');
				scroll1.stop();
			});
			
			
			// Mousemove
			$('mousemove').addEvent('mouseover', scroll2.start.bind(scroll2));
			$('mousemove').addEvent('mouseout', scroll2.stop.bind(scroll2));
		});


HTML:
<div id="mousemove">
    <img alt="" src="images/content/img_1.jpg" class="inside move">
</div>


CSS:
#mousemove, #drag {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
    margin: 0 auto;
}
 
#drag { 
    cursor: url(openhand.cur), move;
}
 
.inside {
    width: 2000px;
    height: 1000px;
}
 
.move {
    /*background: #eee url(pattern1.gif);*/
}
 
.drag {
}


Вылезает ошибка

Цитата:
Uncaught TypeError: Cannot call method 'addEvent' of null index.html:28
(anonymous function) index.html:28
returns mootools-core-1.4.5-full-compat.js:1424
(anonymous function) mootools-core-1.4.5-full-compat.js:1429
(anonymous function) mootools-core-1.4.5-full-compat.js:2899
Element.Methods.Events.fireEvent mootools-core-1.4.5-full-compat.js:2898
(anonymous function) mootools-core-1.4.5-full-compat.js:3605
(anonymous function) mootools-core-1.4.5-full-compat.js:3609
returns mootools-core-1.4.5-full-compat.js:1424

Вот строка 28:
$('drag').addEvent('mousedown', function() {
Ответить с цитированием
  #10 (permalink)  
Старый 05.07.2012, 17:42
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

ddale,
mootools с jQuery не оч в дружбе
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как оптимизировать слайдер NeoMurderer Элементы интерфейса 3 28.06.2012 22:26
слайдер внутри слайдера oke11o jQuery 2 21.11.2011 19:57
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 19:52
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 13:14
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 23.07.2011 23:19