首页 > 代码库 > 利用jqueryzoom实现图片放大镜效果

利用jqueryzoom实现图片放大镜效果

2024-07-02 18:50:09   228人阅读

  • 在你的页面中包含 jqzoom.css
  • Html代码  收藏代码
    1. <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">  
     
  • 包含 jQzoom 和 jQuery JS 代码：
  • Html代码  收藏代码
    1. <script type="text/javascript" src="your_path/jquery.js"></script>  
    2. <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>  
  • 现在创建一个放图片的容器（最好是 DIV），并给 class  赋值为 jqzoom ，然后给每 张图片设置一个jqimg 属性，它的值为大图的地址。
  • Html代码  收藏代码
    1. <div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>  
     
  • 当页面导入的时候，载入 jQZoom 插件。在head之前写入下面JS
  • Js代码  收藏代码
    1. $(document).ready(function(){ $(".jqzoom").jqueryzoom(); });  
     
  • 好了基本设置好了，当然你也可以自己做些简单的设置：
  • Js代码  收藏代码
    1. $(document).ready(function(){  
    2.     $(".jqzoom").jqueryzoom({  
    3.         xzoom: 300, //设置放大 DIV 长度（默认为 200）  
    4.         yzoom: 300, //设置放大 DIV 高度（默认为 200）  
    5.         offset: 10, //设置放大 DIV 偏移（默认为 10）  
    6.         position: "right", //设置放大 DIV 的位置（默认为右边）  
    7.          preload:1,  
    8.         lens:1  
    9.     });  
    10. });  
     这个jquery.js,jquery.jqzoom.js可以在网上下，到处都是。这里就不附件了。
 


联系
我们