jquery 鼠标经过放大图片

最新推荐文章于 2017-12-28 11:29:08 发布

原创最新推荐文章于 2017-12-28 11:29:08 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一个基于jQuery的图片缩放插件elevateZoom.js的使用方法,该插件能够实现图片的平滑缩放效果,适用于产品详情页等场景.文中通过示例代码展示了如何初始化插件及配置选项,包括平滑过渡、显示放大镜等功能.

jquery.elevatezoom.js文件请到演示文件查看

演示

  JavaScript Code
 

  <script type="text/javascript">  
$(document).ready(function() {  
    $(".zoom").elevateZoom({  
        easing : true,  
        borderSize: 1,  
        showLens: true,  
        borderColour: "#fff",  
    });  
});  
</script>  

 

  XML/HTML Code
 
  <div class="container">  
          
        <center>  
            <img class="zoom" src="../dalian.jpg" width="100" data-zoom-image="../dalian.jpg"/>  
            <img class="zoom" src="../xianggang.jpg" width="100" data-zoom-image="../xianggang.jpg"/>  
        </center>  
  
    </div>