suntao12138

图片放大镜插件-jqzoom

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:$(linkimage).jqzoom({options});

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,在页面中,添加一个被<a>元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下面代码所示:

<body>
<div id="divtest">
<div class="title">
<span class="fl">图片放大镜</span>
</div>
<div class="content">
<a href="Imgages/bag.jpg" id="jqzoom" title="我的背包">
<img src="Images/bagsmall.jpg" alt=""/>
</a>
</div>
</div>

<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom //绑定图片放大插件jqzoom
zoomWidth: 230, //小图片所选区域的宽
zoomHeight: 230, //小图片所选区域的高
zoomType: \'reverse\' //设置放大镜的类型
});
});
</script>
</body>

当在小图片中移动鼠标时,将调用放大镜插件的jqzoom()方法,在图片的右侧显示与小图片所选区域相同的放大区域,实现放大镜的效果。

发表于 2017-11-20 18:53  前端小小小小小小小白  阅读(215)  评论(0编辑  收藏  举报
 

分类:

技术点:

相关文章:

  • 2021-10-13
  • 2021-07-08
  • 2021-08-28
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-26
猜你喜欢
  • 2021-09-09
  • 2021-08-12
  • 2021-12-19
  • 2022-12-23
  • 2021-11-05
  • 2021-06-17
相关资源
相似解决方案