jQuery CSS3图片放大镜插件

jQuery CSS3图片放大镜插件

这是一款jQuery基于css3属性制作鼠标悬停图片放大镜预览查看效果代码。

使用方法
在页面引入以下jquery-1.11.0.min.js、lightzoom.js文件

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/lightzoom.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('img.light-zoom').lightzoom({
        zoomPower   : 3,    //Default
        glassSize   : 180,  //Default
    });
});
</script>

HTML结构

1
2
3
4
5
6
7
<div class="content">
  <h3 class="center">gif图片</h3>
  <img src="img/2.gif" class="light-zoom" width="350" height="189"  alt="">
  <br>
  <h3 class="center">PNG图片</h3>
  <img class="light-zoom" width="609px" height="297px" src="img/adobe_text_rendering.png">
</div>

文件信息:

    0

    发表评论