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