>  기사  >  웹 프론트엔드  >  jquery 원형 회전 이미지 스크롤 전환 효과_jquery

jquery 원형 회전 이미지 스크롤 전환 효과_jquery

WBOY
WBOY원래의
2016-05-16 18:11:381289검색

이 효과는 꽤 특별하고 귀엽기 때문에 외부 웹사이트에서는 많이 본 적이 없습니다. 관심 있는 친구들은 직접 다운로드하여 사용해 볼 수 있습니다.
PS: 널리 사용되는 브라우저와 호환되도록 수정되었습니다.
렌더링:
jquery 원형 회전 이미지 스크롤 전환 효과_jquery
온라인 데모: http://demo.jb51.net/js/ImagesRotateScroll/index.html
1단계.

코드 복사 코드는 다음과 같습니다.




  • 춘리

  • jquery 원형 회전 이미지 스크롤 전환 효과_jquery
  • ;li> ;DHAISIM
  •  켄

  • BALROG

  • < ;img src="images/SF6.jpg" alt="CAMMY" />

  • GOUKI
  • BLANKA

  • HONDA

  • FEI LONG
  • GUILE

  • RYU

  • SAGAT

  • THWAK

  • ZANGIEF








CSS 만들기


코드 복사 코드는 다음과 같습니다. #rotatescroll {
width:
height; : 300px;
여백: 0 자동;
위치: 상대;
}
#rotatescroll .viewport{
높이: 300px; ;
여백: 0 자동;
오버플로: 숨김;
}
#rotatescroll .overview {
너비: 798px;
목록 스타일: 없음 ;
여백: 0;
왼쪽: 0;
상단: 0;
#rotatescroll .overview li {
너비: 300px 🎜>높이: 300px ;
float: 왼쪽;
위치: 상대;
}
#rotatescroll .overlay {
높이:
폭: 300px; : url(.. /images/bg-rotatescroll.png) 반복 없음 0 0;
위치: 절대;
왼쪽: 0
위: 0
#rotatescroll .thumb {
너비: 26px;
높이: 26px;
z-index: 200
배경: url(../images/bg-thumb.png) 반복 없음 50% %;
위치: 절대;
커서: 포인터
왼쪽: 0px;
배경: url(. ./images/bg -dot2.png) 반복 없음 0 0;
높이: 12px;
위치: 절대
;
top: 3px;
z-index: 100;
}
#rotatescroll .dot 스팬 { 디스플레이: 없음 }

삽입 jQuery 및 스크립트 패키지





코드 복사


코드는 다음과 같습니다.






패키지 다운로드http://www.jb51.net/jiaoben/34107.html
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.