마우스를 올려 놓을 때 미리보기 이미지를 회전하는 방법은 무엇입니까?

Question

사용자가 커서를 이미지로 이동 한 후에 이미지를 회전시킬 수있는 JS 라이브러리 또는 코드 스 니펫 (jQuery가 허용됨)을 찾습니다. 예를 들어이 기능은 Dailymotion.com 웹 사이트의 비디오 축소판에 대해 구현됩니다.

20-40 축소판 (응용 프로그램 스크린 샷)이있는 웹 페이지에이 코드를 사용하려고합니다. 각 항목에는 사용자가 커서를 축소판으로 이동하고 커서가 떠날 때 회전이 시작될 약 10 개의 추가 이미지가 포함됩니다.

이 이미지를 HTML 코드로 모두로드하고 싶지는 않지만 사용자가 페이지를 열 때마다 필요하지 않은 수백 가지 요청이 있습니다.

불행히도, 내가 발견 한 모든 코드는 HTML 코드에서 정적 이미지 링크를 사용합니다.

검색 엔진에서 답변을 찾으려고했지만 올바른 형식을 찾을 수 없습니다. 나는 "이미지 회전 장치 JS", "호버상에서 이미지 변경", "자동 회전 이미지"및 기타 유사 콘텐츠를 시도했지만 단순히 놓친 다른 이름이있을 수 있습니다.

Answer 1

iPhoto에서 사용하는 것처럼 Apple에서 '스크러빙'이라고 부르는 것을 찾는 것과 같은 소리가납니다.

일부 라이브러리를 설정 빠른 검색

은이 할 일 :

• 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'); 
});