Lập trình JQUERY – Code : Sản phẩm xoay 360 độ Lập trình JQUERY – Code : Sản phẩm xoay 360 độ
Code Jquery sản phẩm xoay 360 độ
Xem thêm tại: http://chupanh360.blogspot.com/2013/04/lap-trinh-jquery-code-san-pham-xoay-
360.html *Nguồn: http://chupanh360.blogspot.com Với mức độ phổ biến của công nghệ chụp ảnh 360 ứng dụng trong các lĩnh vực quảng cáo sản phẩm trên nền web đặc biệt 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 360 độ . Bài viết này chụp ảnh 360 hướng dẫn bạn thực hiện chức năng Xoay hình đó 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 code xoay 360. Việc lấy từ cơ sở dữ liệu cũng không khó khăn lắm.
DOWNLOAD || DEMO
Chuẩn bị : Giải nén gói down về, copy thư mục js vào thư mục chứa site. Bước 1 : Thêm thư viện vào trang web Dán đoạn mã sau vào thẻ head <script type=”text/javascript” src=”js/jquery-1.4.4.min.js” ></script>
<script type="text/javascript" src="js/j360.js" ></script> Bước 2 : Dùng jquery tác dụng lên mã html ở bước 3 Dán đoạn mã jquery vào nơi muốn hiện ảnh sản phẩm xoay
<script type="text/javascript"> jQuery(document).ready(function() { jQuery('#product').j360(); }); </script> Bước 3 :
Lập trình JQUERY – Code : Sản phẩm xoay 360 độ
Lập trình JQUERY – Code : Sản phẩm xoay 360 độ Ngay sau đoạn mã script trên, ta viết mã html theo cấu trúc như sau:
<center> <div id="product" style="width: 640px; height: 480px; overflow: hidden;cursor: move;"> <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-1.jpg' alt="" style="cursor: move;" /> ........................................................................................ ......................................................................................... ...... <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-35.jpg' alt=" " style="cursor: move;" /> <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-36.jpg' alt="" styl e="cursor: move;" /> </div> </center>
Kết thúc.
Code Jquery sản phẩm xoay 360 độ
Xem thêm tại: http://chupanh360.blogspot.com/2013/04/lap-trinh-jquery-code-san-pham-xoay-
360.html *Nguồn: http://chupanh360.blogspot.com
Lập trình JQUERY – Code : Sản phẩm xoay 360 độ