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

最新推荐文章于 2024-01-30 11:15:00 发布

厦门德仔

最新推荐文章于 2024-01-30 11:15:00 发布

阅读量957

点赞数

分类专栏： # JQuery 文章标签： jqzoom

本文链接：https://blog.csdn.net/david_520042/article/details/53182688

版权

JQuery 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

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)
    }
;

厦门德仔

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
[JQ权威指南]图片放大镜插件jqzoom

JQzoom是一款基于JQUERY库的图片放大插件，在页面中实现放大的方法是先准备两张一大一小的相同图片，在页面打开时展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom()方法绑定另外一张相同的大图片，在制定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。该插件非常适合在产品展示时使用。(1)插件文件jquery.jqzoom.js/jquery.jqzoom
复制链接

扫一扫