jquery plugin --image magnifier 放大器

今天研究了一下jquery plugin --image magnifier 放大器。

原理其实很简单，首先你需要一个大图一个小图（或者是一个图），当在小图中移动，计算位差，把这个位差对应到大图上。

当然你还可以隐藏鼠标。

研究结果如下：

/*

//example
$('selector').loupe({
  width: 200, // width of magnifier
  height: 150, // height of magnifier
  loupe: 'loupe' // css class for magnifier
});


<a id="demo-1" href="bigimage.jpg">
  <img src="smallimage.jpg" />
</a>


$('#demo-1').loupe();


.loupe {
    cursor: url("blank.png"), url("blank.cur"), none;
}
*/




/**
 * loupe - an image magnifier for jQuery
 * (C) 2010 jdbartlett, MIT license
 * http://github.com/jdbartlett/loupe
 */
(function ($) {
    $.fn.loupe = function (arg) {
        var options = $.extend({
            loupe: 'loupe',
            width: 200,
            height: 150
        }, arg || {});


        return this.length ? this.each(function () {
            var $this = $(this),
                $big, $loupe, $small = $this.is('img') ? $this : $this.find('img:first'),
                move, hide = function () {
                    $loupe.hide();
                },
                time;


            if ($this.data('loupe') != null) {
                return $this.data('loupe', arg);
            }


            move = function (e) {
                var os = $small.offset(),
                    sW = $small.outerWidth(),
                    sH = $small.outerHeight(),
                    oW = options.width / 2,
                    oH = options.height / 2;


                    //判断是否越界
                if (!$this.data('loupe') || e.pageX > sW + os.left + 10 || e.pageX < os.left - 10 || e.pageY > sH + os.top + 10 || e.pageY < os.top - 10) {
                    return hide();
                }


                time = time ? clearTimeout(time) : 0;


                //移动container
                $loupe.show().css({
                    left: e.pageX - oW,
                    top: e.pageY - oH
                });
                //移动大图片
                $big.css({
                    left: -(((e.pageX - os.left) / sW) * $big.width() - oW) | 0,
                    top: -(((e.pageY - os.top) / sH) * $big.height() - oH) | 0
                });
            };


            //新建大图片的container
            $loupe = $('<div />').addClass(options.loupe).css({
                width: options.width,
                height: options.height,
                position: 'absolute',
                overflow: 'hidden'
            }).append($big = $('<img />').attr('src', $this.attr($this.is('img') ? 'src' : 'href')).css('position', 'absolute')).mousemove(move).hide().appendTo('body');


            $this.data('loupe', true).mouseenter(move).mouseout(function () {
                time = setTimeout(hide, 10);
            });
        }) : this;
    };

}(jQuery));

出处：

jquery magnifier http://jdbartlett.com/loupe/ 
or

http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx