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

扫码或搜索：进击的Coder

发送

即可立即永久解锁本站全部文章

综述

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

在线演示

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

在线预览

插件文件

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

HTML

<!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>

<!DOCTYPE html>

<html>

<head>

<title>JQZoom放大镜</title>

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>

$(function() {

$("#jqzoom").jqzoom( //绑定图片放大插件jqzoom

{

zoomWidth: 230,

zoomHeight: 230,

position: 'right'

}

);

});

</script>

</head>

<body>

图片放大镜

</div>

</a>

</div>

</body>

</html>

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

代码分析

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

</a>

最主要的部分如上所示，是一个超链接包含了一张图片。超链接的href是图片的大图，里面的img的src是小图。

利用插件时，只需要取到超链接这个元素，然后调用jqzoom方法就可以了

$("#jqzoom").jqzoom( //绑定图片放大插件jqzoom
	 {
		 zoomWidth: 230,
		 zoomHeight: 230,
		 position: 'right'
	 }
);

$("#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

更多文章、联系博主、技术交流、商务合作

扫码或搜索：进击的Coder

进击的Coder

微信公众号扫一扫关注

静觅崔庆才的个人博客