【jQuery 插件】imageLens的解析

2019独角兽企业重金招聘Python工程师标准>>>

imageLens 的介绍和demo大家自己百度一下，我这里就简单分析一下源码；

/*  

-2013-1-16-
这个插件的基本思想是
1.建立一个div，然后设置div的边框是圆形，用border-radius，并一直处于hide状态，并添加background-image；
2.创建一个img元素，也是hidden状态，这个元素的作用是用来计算比率widthRatio的（在每次载入的时候）；
3.编写一个Setposition函数，用来给第一步中的div修改背景图片的位置；用比较复杂的计算，和第二步中的比率；
    http://www.dailycoding.com/ 
*/
(function ($) {
    $.fn.imageLens = function (options) {


        var defaults = {
            lensSize: 100,
            borderSize: 4,
            borderColor: "#888"
        };
        var options = $.extend(defaults, options);
        var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize)
            + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize)
            + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor 
            + ";background-repeat: no-repeat;position: absolute;";//定义方框大小和形状；


        return this.each(function () {
            obj = $(this);


            var offset = $(this).offset();


            // Creating lens
            var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'>&nbsp;</div>").appendTo($(this).parent());
            var targetSize = target.size();


            // Calculating actual size of image
            var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src");
            var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";
            //这里没了，就只有图片的一个角？这是为什么？imageTag是一个图片元素；


            var widthRatio = 0;//ratio是用来定位的；如果没有这个，就会从左上角开始；
            var heightRatio = 0;
//$(this).width:1280   obj.width:384;
            $(imageTag).load(function () { //当图片一载入的时候，就设置比例，然后将图片挂上..img元素的作用就是来求比例的..
                widthRatio = $(this).width() / obj.width();
                heightRatio = $(this).height() / obj.height();
            }).appendTo($(this).parent());//这两个this的含义应该是不一样的；外面的this是小图片的；里面的this是大图片的；

            target.css({ backgroundImage: "url('" + imageSrc + "')" });
//这里没了，就没有图片，target是一个div
            target.mousemove(setPosition);
            $(this).mousemove(setPosition);


            function setPosition(e) {


                var leftPos = parseInt(e.pageX - offset.left);//当前鼠标与最近的div边框的距离；
                var topPos = parseInt(e.pageY - offset.top);


                if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {//如果移除去了
                    target.hide();
                }
                else {
                    target.show();  //target之前一直都是隐藏的，就是因为这里，所以才显示出来了；


                    leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1));
                    topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1));
                   target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' });//删除的话园框内的东西不会移动；


                    leftPos = String(e.pageX - target.width() / 2);
                    topPos = String(e.pageY - target.height() / 2);
                   target.css({ left: leftPos + 'px', top: topPos + 'px' });//删除的话园框不会移动；
                }
            }
        });
    };
})(jQuery);

转载于:https://my.oschina.net/qiujumper/blog/102513