Как повернуть миниатюры на мыши?

Question

Ищет библиотеку JS или фрагмент кода (разрешен jQuery), который может поворачивать изображения после того, как пользователь перемещает курсор на изображение. Например, эта функция реализована для видео эскизов на веб-сайте Dailymotion.com.

Я собираюсь использовать этот код для веб-страницы с 20-40 эскизами (скриншоты приложений), и каждый элемент содержит около 10 дополнительных изображений, которые должны начинаться с вращения, когда пользователь перемещает курсор на миниатюру и останавливается, когда курсор уходит.

Я не хочу загружать все эти изображения в html-код, это несколько сотен запросов, которые не нужны при каждом входе пользователя на страницу.

К сожалению, весь код, который я нашел, использует статическое изображение, связанное с кодом html.

Я попытался найти ответ в поисковых системах, но не могу найти правильную формулировку. Я попробовал «ротатор изображений JS», «изменить изображения при наведении», «авто поворот изображений» и некоторые другие варианты, может быть, эта задача просто имеет другое имя, которое я пропустил.

Answer 1

Похоже, что вы ищете что-то, что яблоко вызывает «Скраббинг», как в iPhoto.

Некоторые быстрый поиск превратили некоторые библиотеки список дел только это:

• MooTools - http://www.tangerinesmash.com/2008/mootools-iphoto-image-scrubber/
• Jquery - http://www.stucktogetherwithtape.com/code/scrub
• Google Поиск - http://www.google.com/search?q=javascript+iphoto+image+scrubbing

Answer 2

Попробуйте использовать Cycle Plugin.

Если у вас есть класс для больших пальцев под названием .thumb, вы можете управлять им командами .cycle('pause') и .cycle('resume').

$('.thumb').cycle({ ... }).cycle('pause'); // setup, choose your own settings, then pause 

$('.thumb').hover(function() { 
    $(this).cycle('resume'); 
}, function() { 
    $(this).cycle('pause'); 
});