MENU 
Sản phẩm-chipkool.tk.png)
Trang chủ
Nổi bậc
Tiện ích-chipkool.tk.png)
Tài khoản
Tác vụ
YOUTUBE
NHẠC
Trang chủ
Hiệu ứng trượt hình ảnh xoay vòng sử dụng jQuery
Thứ Sáu, 19 tháng 11, 2010
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsXLRf0-cXgdw39MBE3rTyiScN5NLj5goa3AQ9io5Udtat26bLTppFLPwIntQYt7iuOfa7v71GnGmwsfXDup_lyREHdTKZ29fGd2EyRA_6cmXu_t6ShqaBHhL0u6EYjs6hl84pHD9GGA/s0/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTGL6MNDEl3vBQS3w3oqd4NkKO3TzIghYc9p2hYkbkwYpHQCXe8myu5uMNDDwko97CzmtTWgtynoRMY7hK5Rdm_vgPzQM-UiQB8htW5dglMMVi51wPqvGZ1x-dp-6DeryBV1GVegDxTI/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFX81nlESfbvS7q4ufVOVqYC5xnu_8HyW_Sl6Z5kUHSOqELjQf8hq8v7KqtRf0bGruj2dxZ5RWYGsdjIJreEman04V5A0tMI0PSRQ9coxR7lHkBFE-Bd8mOEak66najLOMFc4AG9UX9Y4/s0/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.#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlsXLRf0-cXgdw39MBE3rTyiScN5NLj5goa3AQ9io5Udtat26bLTppFLPwIntQYt7iuOfa7v71GnGmwsfXDup_lyREHdTKZ29fGd2EyRA_6cmXu_t6ShqaBHhL0u6EYjs6hl84pHD9GGA/s0/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYTGL6MNDEl3vBQS3w3oqd4NkKO3TzIghYc9p2hYkbkwYpHQCXe8myu5uMNDDwko97CzmtTWgtynoRMY7hK5Rdm_vgPzQM-UiQB8htW5dglMMVi51wPqvGZ1x-dp-6DeryBV1GVegDxTI/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFX81nlESfbvS7q4ufVOVqYC5xnu_8HyW_Sl6Z5kUHSOqELjQf8hq8v7KqtRf0bGruj2dxZ5RWYGsdjIJreEman04V5A0tMI0PSRQ9coxR7lHkBFE-Bd8mOEak66najLOMFc4AG9UX9Y4/s0/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'/>
<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.<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>
Để 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 });
Tăng cỡ chữ
Mặc định
Giảm cỡ chữ
Lên trên
Tổng số Bình luận [ 0]
Đăng nhận xét