Tag xoay với jQuery

Thông thường các tag xoay tròn 3d (hoặc Menu) được thực hiện với hiệu ứng Flash...tuy nhiên Flash thì có có mang tính thương mại nhiều hơn. Trong bài này xin giới thiệu một dạng tag xoay tròn với hiệu ứng jQuery để các bạn tham khảo. Thủ thuật này chạy được trên hầu hết các trình duyệt thử nghiệm trên IE6-IE9, Chrome, Opera, Safari...
Bạn có thể xem demo thủ thuật này tại phần tag ở cuối bài viết nầy.

Bước 1: Đăng nhập vào Blogger » Thiết kế (Design) » Chỉnh sửa HTML (Edit/Html) » Mở rộng tiện ích và dán đoạn code sau vào trên thẻ đóng </head> <!-- Tag xoay --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://www.professorcloud.com/js/jquery.aall.1.0.0.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js' type='text/javascript'/> <script src='http://www.professorcloud.com/js/showhide.js' type='text/javascript'/> <script src='http://www.professorcloud.com/js/jquery.mousewheel.js' type='text/JavaScript'/> <script src='http://www.professorcloud.com/js/cloud-carousel.1.0.5.js' type='text/JavaScript'/> <script src='http://www.professorcloud.com/js/slimbox-2.03/js/slimbox2.js' type='text/JavaScript'/> <script type='text/javascript'> $(document).ready(function(){ $("#da-vinci-carousel").CloudCarousel( { reflHeight: 56, reflGap:2, titleBox: $('#da-vinci-title'), altBox: $('#da-vinci-alt'), buttonLeft: $('#but1'), buttonRight: $('#but2'), yRadius:40, xPos: 120, yPos: 90, speed:0.15, mouseWheel:true }); $("#carousel2").CloudCarousel({ xPos:115, yPos:40, FPS:30, autoRotate: 'left', autoRotateDelay: 1200, speed:0.2, mouseWheel:true, bringToFront:true }); }); </script> <script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-254857-6']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <!-- Tag xoay -->
Chú ý:
...................
yRadius:40,
xPos: 120,
yPos: 90,
speed:0.15,

$("#carousel2").CloudCarousel({
xPos:115,
yPos:40,
...................
Các chỉ số màu xanh là chiều rộng và chiều cao hiển thị của hình ảnh xoay.
Bạn nên tải file .JS lưu trử trên host để tránh một ngày nào đó file nay không hoạt động.

Bước 2: Dán đoạn code bên dưới vị trí muốn hiển thị. <!-- Tag xoay --> <div id='carousel2' style='width:230px; height: 160px; background:#transparent url();overflow:scroll;'> <a href='Link của tag 1' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 1' title='' width='50'/></a> <a href='Link của tag 2' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 2' title='' width='50'/></a> <a href='Link của tag 3' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 3' title='' width='50'/></a> <a href='Link của tag' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh' title='' width='50'/></a> <a href='Link của tag 4' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 4' title='' width='50'/></a> <a href='Link của tag 5' target='_blank'><img alt='' class='cloudcarousel' height='70' src='Link hình ảnh 5' title='' width='50'/></a> </div> <!-- Tag xoay -->
Bạn thay thế các Link của tag, Link hình ảnh, title, alt, chiều rộng và chiều cao cho phù họp theo web/blog của bạn.

Nếu bạn bạn dán code này trong templates thì giữ nguyên code, còn dán vào HTML/javascript thì nên thay thế các dấu (') thành dấu (").

Chúc thành công.

Nguồn: professorcloud.com