0%

jQuery应用四之图片局部放大插件jQZoom

综述

我们都见过淘宝上的宝贝,把鼠标放上去,会有局部放大的功能,现在我们可以利用一个叫jQZoom的插件,来实现图片的局部放大,让我们来感受一下

在线演示

我们首先来在线演示一下效果,然后我们说一下是怎样的实现,点开链接进行预览吧 在线预览

插件文件

其中包含了两个JS文件,一个是jQuery库,另一个就是jqzoom插件文件。另外还有一个css文件,主要作用是给图片放缩规定样式

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<title>JQZoom放大镜</title>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jqzoom.js"></script>
<link rel="stylesheet" type="text/css" href="css/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( //绑定图片放大插件jqzoom
{
zoomWidth: 230,
zoomHeight: 230,
position: 'right'
}
);
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
图片放大镜
</div>
<div class="divContent">
<a href="images/bag.jpg" id="jqzoom" title="我的背包">
<img src="images/bagsmall.jpg">
</a>
</div>
</div>
</body>
</html>

Demo的代码如上所示,下面我们来分析一下代码调用

代码分析

1
2
3
<a href="images/bag.jpg" id="jqzoom" title="我的背包">
<img src="images/bagsmall.jpg">
</a>

最主要的部分如上所示,是一个超链接包含了一张图片。超链接的href是图片的大图,里面的img的src是小图。 利用插件时,只需要取到超链接这个元素,然后调用jqzoom方法就可以了

1
2
3
4
5
6
7
$("#jqzoom").jqzoom( //绑定图片放大插件jqzoom
{
zoomWidth: 230,
zoomHeight: 230,
position: 'right'
}
);

用法很简单,只需要传入一些参数就可以了。

参数详解

下面是所有的参数详解

  • zoomType,默认值:’standard’,另一个值是’reverse’,是否将原图用半透明图层遮盖。
  • zoomWidth,默认值:200,放大窗口的宽度。
  • zoomHeight,默认值:200,放大窗口的高度。
  • xOffset,默认值:10,放大窗口相对于原图的x轴偏移值,可以为负。
  • yOffset,默认值:0,放大窗口相对于原图的y轴偏移值,可以为负。
  • position,默认值:’right’,放大窗口的位置,值还可以是:’right’ ,’left’ ,’top’ ,’bottom’。
  • lens,默认值:true,若为false,则不在原图上显示镜头。
  • imageOpacity,默认值:0.2,当zoomType的值为’reverse’时,这个参数用于指定遮罩的透明度。
  • title,默认值:true,在放大窗口中显示标题,值可以为a标记的title值,若无,则为原图的title值。
  • showEffect,默认值:’show’,显示放大窗口时的效果,值可以为: ‘show’ ,’fadein’。
  • hideEffect,默认值:’hide’,隐藏放大窗口时的效果: ‘hide’ ,’fadeout’。
  • fadeinSpeed,默认值:’fast’,放大窗口的渐显速度(选项: ‘fast’,’slow’,’medium’)。
  • fadeoutSpeed,默认值:’slow’,放大窗口的渐隐速度(选项: ‘fast’,’slow’,’medium’)。
  • showPreload,默认值:true,是否显示加载提示Loading zoom(选项: ‘true’,’false’)。
  • preloadText,默认值:’Loading zoom’,自定义加载提示文本。
  • preloadPosition,默认值:’center’,加载提示的位置,值也可以为’bycss’,以通过css指定位置。

大家可以尝试设置上面的参数来达到想要的效果。

综述

通过jQZoom这个插件我们可以很方便地实现图片的局部放缩预览,希望对大家有帮助。