现在位置首页 / 前端开发 /正文

jquery文字图片放大镜插件开发及demo

作者: IT小兵 | 2014年10月10日| 热度:℃ | 评论: |参与:

前几天在群里有人问道怎么使用jquery的放大镜插件,今天分享一个简单的jquery放大镜。

实现原理:

  这里用到了两张图片,一张小图,一张大图。将大图设置为放大镜的背景图片,当鼠标在小图上移动时,同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的,这样才能达到最佳效果。当没有大图时,则默认为小图本身,这时由于两张图片大小一样,因此放大镜效果不明显,就跟没放大是一样的。

 

  此插件用到了html5,css3的一些属性,ie8及以下版本不兼容,放大镜是方形的。

先看效果:

1.>小图

  

  

  2.>大图(实际尺寸比下面这张图要大,下面这张图是我截的小尺寸图)

  

 

  3.>放大镜效果

  

  第三张图就是放大镜效果。这两张图也还是从别人网站copy下来的,给出站点网址:http://www.cunqianguan.me/

  你可以直接访问该网址看下实际效果。希望该站长别介意才好.....

 

  插件实现代码如下:

(function () {
    $.fn.Magnifier = function (options) {
        //默认参数设置
        var settings = {
            diameter: 150,                  //放大镜的直径大小
            borderWidth: 2,                 //放大镜边框大小
            borderColor: "white",           //放大镜边框颜色
            backgroundImg: "../img/111.jpg" //放大镜内的图片(即大图)
        };
        //合并参数
        if (options)
            $.extend(settings, options);
        //链式原则
        return this.each(function () {
            //存储当前对象
            var root = $(this);
            //当前对象宽高
            var WRoot = root.width();
            var HRoot = root.height();
            //偏移量 left 和 top
            var offset = root.offset();
            //放大镜样式
            var style = "background-position: 0px 0px;background-repeat: no-repeat;float: left;";
            style += "position: absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display: none;";
            style += "width: " + String(settings.diameter) + "px;height: " + String(settings.diameter) + "px;";
            style += "border-radius: " + String(settings.diameter / 2 + settings.borderWidth) + "px;";
            style += "border: " + String(settings.borderWidth) + "px solid " + settings.borderColor + ";";
            //创建放大镜
            var magnifier = $("<div style='" + style + "'></div>").appendTo(root.parent());
            //图片(当没有大图时,为小图本身)
            var backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src");
            //将图片放入放大镜内
            magnifier.css({ backgroundImage: "url('" + backgroundImg + "')" });
            //缩放比例
            var WRatio = 0;    //宽度
            var HRatio = 0;    //高度
            //图片加载完,计算缩放比例
            //由于图片原本不在DOM文档里,因此页面加载时不会触发load事件,因此要通过执行appendTo来触发load事件
            $("<img style='display:none;' src='" + backgroundImg + "' />").load(function () {
                WRatio = $(this).width() / WRoot;
                HRatio = $(this).height() / HRoot;
            }).appendTo(root.parent());
            //放大镜及其背景图片位置控制
            function Position(e) {
                var LPos = parseInt(e.pageX - offset.left);
                var TPos = parseInt(e.pageY - offset.top);
                //判断鼠标是否在图片上
                if (LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot) {
                    magnifier.hide(); //不在隐藏放大镜
                } else {
                    magnifier.show(); //反之显示放大镜
                    //控制放大镜内背景图片的位置   (settings.diameter / 2)半径
                    LPos = String(((e.pageX - offset.left) * WRatio - settings.diameter / 2) * (-1));
                    TPos = String(((e.pageY - offset.top) * HRatio - settings.diameter / 2) * (-1));
                    magnifier.css({ backgroundPosition: LPos + 'px ' + TPos + 'px' });
                    //控制放大镜本身位置
                    LPos = String(e.pageX - settings.diameter / 2);
                    TPos = String(e.pageY - settings.diameter / 2);
                    magnifier.css({ left: LPos + 'px', top: TPos + 'px' });
                }
            }
            //放大镜
            magnifier.mousemove(Position);
            //当前对象
            root.mousemove(Position);
        });
    };
})();

调用方法:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3+jQuery图像放大镜效果</title>
    <style type="text/css">
        body
        {
            background-color: Black;
        }
        .box
        {
            width: 700px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="box">
     <!--小图-->
        <img alt="" id="img_02" src="../img/222.gif" width="700" height="500" />
    </div>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.similar.magnifier.js" type="text/javascript"></script>
    <script type="text/javascript">
        $("#img_02").Magnifier();
    </script>
</body>
</html>


参考:http://www.cnblogs.com/similar/p/4014795.html



点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询