jquery 鼠标经过放大图片

最新推荐文章于 2022-05-20 18:05:50 发布

最新推荐文章于 2022-05-20 18:05:50 发布 · 324 阅读

文章标签：

#javascript #ViewUI

本文介绍如何利用jQuery库中的elevateZoom插件轻松实现图片放大展示功能，通过简单的JavaScript代码和HTML结构，为用户提供更丰富的视觉体验。

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>