Hiệu ứng phóng to hình ảnh với jQuery plugin cloud-zoom

  • JavaScript
  • 29 tháng 06 2012
  • bởi Văn Khương
  • 0 Comments

hieu_ung_phong_to_hinh_anh_voi_jQuery_plugin_cloud_zoom

Bài viết này sẽ giới thiệu một hiệu ứng khá hay với jQuery, khi bạn hover chuột lên hình ảnh thì sẽ có một hình ảnh phóng to tại phạm vi bao quanh chuột, chức năng giống như một chiếc kính lúp sẽ giới thiệu sau đây thuộc về tác giả R Cecco ở địa chỉ professorcloud.com.

Để sử dụng chúng ta cần có cấu trúc HTML như sau

<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/JavaScript" src="cloud-zoom.1.0.2.js"></script>
<a href='images/zoom/hs-buildings-1.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:false, smoothMove:5, zoomWidth: 500">
   <img src="images/thums/hs-buildings-1.jpg" alt='' align="left" title="Optional title display" />
</a>

Ở trên thẻ img sẽ là hình thumnail còn liên kết của thẻ a sẽ là đường dẫn tới hình sẽ phóng to ở đây bạn phải đặt class=cloud-zoom để xác định hình ảnh sẽ sử dụng chức năng cloud-zoom. Thuộc tính rel sẽ chứa các tùy chọn cho hiệu ứng.
Chúng ta định kiểu cho hình phóng to trong file cloud-zoom.css

Để xem demo, tải chương trình và xem hướng dẫn chi tiết về các tùy chọn cũng như cách sử dụng bạn truy cập tại địa chỉ professorcloud.com

  • Chia sẻ
comments powered by Disqus