Chia sẻ thủ thuật blogspot - blogger

luat1x1

10/19/2011

Hiệu ứng trượt hình ảnh xoay vòng sử dụng jQuery


Tiny Circleslider là một plugin jQuery tạo ra hiệu ứng xoay tròn hình ảnh.


Hãy ghé qua trang nhà của tác giả hiệu ứng này để tìm hiểu thêm. Ở đây tôi xin giới thiệu cách thực hiện một trong những ví dụ minh họa cho hiệu ứng này.

Xem Demo

1. Trước tiên, đặt phần css và js dưới đây vào trước thẻ </head>.
<style type='text/css'>
#rotatescroll{height:300px;position:relative;width:300px}
#rotatescroll .viewport{height:300px;position:relative;margin:0 auto;overflow:hidden;width:300px}
#rotatescroll .overview{ left:0;list-style:none;margin:0;padding:0;position:absolute;top:0}
#rotatescroll .overview li{ float:left;height:300px;position:relative;width:300px}
#rotatescroll .overlay{ background:transparent url(http://3.bp.blogspot.com/_hljKDuw-cxQ/TOAzYymNcsI/AAAAAAAARJE/BhUMn0x75e0/s00/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(http://2.bp.blogspot.com/_hljKDuw-cxQ/TOAzZDwIQpI/AAAAAAAARJI/MSMMLAWC22k/s00/bg-thumb.png) no-repeat 0 0;cursor:pointer;height:26px;left:137px;position:absolute;top:-3px;width:26px;z-index:200}
#rotatescroll .dot{ background:transparent url(http://2.bp.blogspot.com/_hljKDuw-cxQ/TOAzYen764I/AAAAAAAARJA/5rL5nmoOiBU/s00/bg-dot.png) no-repeat 0 0;display:none;height:12px;left:155px;position:absolute;top:3px;width:12px;z-index:100}
#rotatescroll .dot span{ display:none}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

<script scr='http://baijs.nl/tinycircleslider/js/jquery.tinycircleslider.min.js' type='text/javascript'/>
2. Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân trang web/blogspot.
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="URL_hinh 1" /></li>
<li><img src="URL_hinh 2" /></li>
<li><img src="URL_hinh 3" /></li>
<li><img src="URL_hinh4" /></li>
<li><img src="URL_hinh5" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
Bạn cần đưa liên kết các hình ảnh vào cấu trúc nêu trên.

Để hiệu ứng hoạt động thì cần đặt đoạn js bên dưới vào phía sau phần HTML.

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>

Nếu muốn hiệu ứng trượt tự động thì điều chỉnh js lại như sau:

$(document).ready(function(){ $('#rotatescroll').tinycircleslider({ interval: true });
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top