Hiệu ứng phóng to ảnh

Cập nhật lần cuối 18/03/2017 by trong HTML&CSS vào 15/10/2013 có 939 Views

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?

DemoDownload Now

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!

Hiệu ứng phóng to ảnh
5 (100%) 1 vote
Từ khóa: , ,
  • Bình luận
Có thể bạn quan tâm
x