您的位置：首页 > 其它

[JQ权威指南]图片放大镜插件jqzoom

2016-11-16 08:14 381 查看

JQzoom是一款基于JQUERY库的图片放大插件，在页面中实现放大的方法是先准备两张一大一小的相同图片，在页面打开时展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom()方法绑定另外一张相同的大图片，在制定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。该插件非常适合在产品展示时使用。
(1)插件文件
jquery.jqzoom.js/jquery.jqzoom.css
图片资源
(2)下载地址
(3)功能描述
在页面中放置一张图片，当鼠标在图片中移动时，出现一块选择区域，在图片的右边显示放大后的所选区域。
(4)实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQZoom放大镜插件</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="Js-7-7/jquery.jqzoom.js">
</script>
<link rel="stylesheet" type="text/css"
href="Css-7-7/jquery.jqzoom.css" />
<style type="text/css">
body{font-size:13px}
span{color:Red;font-size:12px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
.divFrame .divContent{padding:8px;line-height:1.6em}
.divFrame .divContent img{border:1px solid #ccc}
</style>
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom(
{
zoomWidth:230,
zoomHeight:230
}
);
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
图片放大镜
</div>
<div class="divContent">
<a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包">
<img src="Images-7-7/bagsmall.jpg" />
</a>
</div>
</div>
</body>
</html>

(5)页面效果

(6)代码分析

在页面中，为了实现图片放大效果，除引用插件的JS文件外，还必须导入与之匹配的CSS文件。

引用完JS和CSS文件后，接下来的工作就是将图片与插件绑定，为实现这一目的，首先在页面中增加一个标记用于显示小图片，并将图片用以个标记包裹起来；同时将标记的href属性设置为大图的URL，并设置title属性，其实现代码：

<a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包">
<img src="Images-7-7/bagsmall.jpg" />
</a>

然后，在JS文件中通过jqzoom()方法绑定对应的放大元素，其实现代码如下：

$(function () {
$("#jqzoom").jqzoom(
{
zoomWidth:230,
zoomHeight:230
}
);
})

在插件调用的jqzoom（[option]）方法中，可选项参数Option是一个对象，除上述zoomWidth与zoomHeight属性外，还有如下的常用属性：

$(element).jqzoom()
{
zoomType:   //放大镜类型，默认为"standard",如果设  为"reverse",在小图
//片移动鼠标时，所选区域将高亮显示，非选中区域为淡灰色
xOffset://放大后的图片与小图片间X距离
yOffset://放大后的图片与小图片间y距离
position://放大后的图片相对原图片的位置，默认为"right",可设置  为"left"/"top"/bottom
lens:        //一个布尔值，表示是否显示小图片中的选择区域，默认为true
title:       //一个布尔值，表示是否显示放大图片的主题，默认值为true
imageOpacity: //当zoomType的值为"reverse"时，用来设置非选中区域透明度的值，取值范围(0.0-1.0)
}
;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航