Rotate 360 degrees with javascript - Xoay hình 360 độ với
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 nhưng trang thegioididong.com đang sử dụng. Bài viết này tôi hướng dẫn bạn thực ...
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 nhưng trang thegioididong.com đang sử dụng. Bài viết này tôi hướng dẫn bạn thực hiện chức năng Xoay hình đó. Demo Rotate, javascript, jquery, Xoay hình
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 nhưng trang thegioididong.com đang sử dụng. Bài viết này tôi hướng dẫn bạn thực hiện chức năng Xoay hình đó. Demo Rotate, javascript, jquery, 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:
hmweb Rotate 360 degrees with javascript
Tại nơi muốn hiển thị xoay 360o bạn chèn đoạn code như sau:
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.
Liên kết download Source: http://www.mediafire.com/?4fbb3mh9hvypubn
Bạn có thắc mặc về bài viết, Bạn có thể tham gia thảo luận tại diễn đàn Xoay hình 360 độ với
Nguồn: thietkewebsmart.com
