在调用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()方法，在图片的右侧显示与小图片所选区域相同的放大区域，实现放大镜的效果。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
