Как вращать миниатюры изображений при наведении курсора мыши?

Question

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

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

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

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

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

Answer 1

Попробуйте использовать 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');
});

Answer 2

Похоже, вы ищете что-то, что яблоко называет 'Scrubbing', как они используют в 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