Địa chỉ

Số 1 - Quốc lộ 1 A
» » Lập trình JQUERY – Code : Sản phẩm xoay 360 độ

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 độ


 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 :
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="" style="cursor: move;" /> 
             </div> 
        </center>  
Kết thúc
 
 
 
vd:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>360 degrees product view</title>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
        <script type="text/javascript" src="js/j360.js" ></script>
    </head>
    <body>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#product').j360();
            });
        </script>
        <center>
            <div id="product" style="width: 400px; height: 450px; 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-2.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-3.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-4.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-5.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-6.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-7.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-8.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-9.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-10.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-11.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-12.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-13.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-14.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-15.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-16.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-17.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-18.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-19.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-20.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-21.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-22.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-23.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-24.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-25.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-26.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-27.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-28.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-29.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-30.jpg' alt="" style="cursor: move;" />
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-31.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-32.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-33.jpg' alt="" style="cursor: move;" />
    <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-34.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="" style="cursor: move;" />
             </div>
        </center>
    </body>
</html>
.

0 Response to "Lập trình JQUERY – Code : Sản phẩm xoay 360 độ "

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Friends list