Cái này một lần mình thấy trên một trang bán xe đạp, thấy nó đẹp nên zip về chơi. Hôm nay shared cho các bạn để dùng cho web của mình nha. Nhất là với ai làm web bán quần áo hày giầy mà cho hiệu ứng này vào thì tuyệt vời phải không?
Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.
Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino hosting
- iNet
- Nước ngoài thì Vultr
Chúng ta mổ xẻ nó một chút nha.
Trước tiên là HTML:
<div id="wrap" style="top: 0px; z-index: 9999; position: relative;"><a id="zoom1" class="cloud-zoom" style="position: relative; display: block;" title="" href="js/h6-03.jpg" rel="adjustX: 10, adjustY:-4"> <img style="display: block;" src="js/h6-03.jpg" alt="" width="450px" /></a> <div class="mousetrap" style="z-index: 999; position: absolute; width: 450px; height: 275px; left: 0px; top: 0px; cursor: move;">
Và thêm JS nữa nhé
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script> <script type="text/javascript" src="js/js.js"></script>
Chú ý: khi muốn thành phần nào đó có chức năng zoom ảnh thì bạn cho thêm
class="cloud-zoom"
vào thành phần đó nhé.
Tất cả các file đó mình cho trong file zip rồi nhé.
Trong quá trình zip có lỗi hay thừa chỗ nào đó mong các bạn thông cảm nha.
chúc các bạn ứng dụng tốt cho web của mình!
- Bình luận
