扫码或搜索:进击的Coder
发送
即可立即永久解锁本站全部文章

综述
我们都见过淘宝上的宝贝,把鼠标放上去,会有局部放大的功能,现在我们可以利用一个叫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这个插件我们可以很方便地实现图片的局部放缩预览,希望对大家有帮助。
转载请注明:静觅 » jQuery应用四之图片局部放大插件jQZoom