[Thảo Luận] Rotate 360 degrees with javascript - Xoay hình 360 độ với jquery

tritro

New Member
#1
  • Trong các trang giới thiệu sản phẩm, đặc biện là các trang thương mại điện tử, các hình ảnh mô tả sản phẩm càng chi tiết, đẹp mắt thì sẽ mang lại nhiều hiệu quả hơn đặc biệt với hình ảnh dạng 3D có thể xoay 360o. Bài viết này hướng dẫn bạn thực hiện chức năng Xoay hình đó

    Khi thực hiện chức năng này sẽ làm cho website của bạn sinh động hơn nhưng bộ phận biên tập viên sẽ mất nhiều công sức chụp nhiều hình ảnh sản phẩm từ nhiều góc độ.
    Trong bài này tôi chỉ minh họa cho bạn cách thực hiện với html và javascript. Việc lấy từ cơ sở dữ liệu cũng không khó khăn lắm.


    Để thực hiện bạn cần có các thư viện jquery và j360.js (Các file này và ví dụ mẫu tôi sẽ gửi bạn liên kết download ở cuối bài viết).
    Sau khi có các thư viện này rồi việc thực hiện rất đơn giản như code minh họa sau đây:
    Add các thư viện và viết jquery:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>hmweb Rotate 360 degrees with javascript</title><script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script><script type="text/javascript" src="js/j360.js" ></script><script type="text/javascript"> jQuery(document).ready(function() { jQuery('#product').j360(); });</script>Tại nơi muốn hiển thị xoay 360[SUP]o[/SUP] bạn chèn đoạn code như sau:

    <center> <div id="product" style="width: 640px; height: 480px; overflow: hidden;cursor: move;"> <img src='/Images/hinh1-1.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-2.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-3.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-4.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-5.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-6.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-7.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-8.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-9.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-10.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-11.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-12.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-13.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-14.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-15.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-16.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-17.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-18.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-19.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-20.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-21.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-22.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-23.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-24.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-25.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-26.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-27.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-28.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-29.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-30.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-31.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-32.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-33.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-34.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-35.jpg' alt="" style="cursor: move;" /> <img src='/Images/hinh1-36.jpg' alt="" style="cursor: move;" /> </div></center>Bạn thay các scr ảnh thành ảnh tương ứng của bạn, Khi sử dụng bạn chụp cành nhiều hình tức là các hình ở các góc khác nhau của sản phẩm càng mịn thì khi xoay hình sẽ càng mịn.
 
Khuyến mãi vps
Top