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

原理其實(shí)很簡單，首先你需要一個(gè)大圖一個(gè)小圖（或者是一個(gè)圖），當(dāng)在小圖中移動(dòng)，計(jì)算位差，把這個(gè)位差對(duì)應(yīng)到大圖上。

當(dāng)然你還可以隱藏鼠標(biāo)。

研究結(jié)果如下：

/*

//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;


?? ? ? ? ? ? ? ?//移動(dòng)container
?? ? ? ? ? ? ? ?$loupe.show().css({
?? ? ? ? ? ? ? ? ? ?left: e.pageX - oW,
?? ? ? ? ? ? ? ? ? ?top: e.pageY - oH
?? ? ? ? ? ? ? ?});
?? ? ? ? ? ? ? ?//移動(dòng)大圖片
?? ? ? ? ? ? ? ?$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

總結(jié)

以上是生活随笔為你收集整理的jquery plugin --image magnifier 放大器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。