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

举报
崔庆才丨静觅 发表于 2021/05/22 01:38:51 2021/05/22
【摘要】 综述 我们都见过淘宝上的宝贝，把鼠标放上去，会有局部放大的功能，现在我们可以利用一个叫 jQZoom 的插件，来实现图片的局部放大，让我们来感受一下 在线演示 我们首先来在线演示一下效果，然后我们说一下是怎样的实现，点开链接进行预览吧 在线预览 插件文件 jquery.min.js jquery.jqzoom.js jquery.jqzoom.css 其中包含了两个 J...

综述

我们都见过淘宝上的宝贝，把鼠标放上去，会有局部放大的功能，现在我们可以利用一个叫 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 这个插件我们可以很方便地实现图片的局部放缩预览，希望对大家有帮助。

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/1592.html

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
jQuery jQuery UI
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入