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ó 2585 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

Để 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

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!

4/5 - (2 votes)
Từ khóa: , ,
  • Bình luận
Sản phẩm nổi bật của Toản
x