快捷導(dǎo)航

基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)

更新時(shí)間：2011年11月19日 17:13:03 作者：

公司某個(gè)網(wǎng)站，需要實(shí)現(xiàn)圖片預(yù)覽效果，并能像淘寶一樣實(shí)現(xiàn)局部分大，使用jquery的朋友可以參考下。

需求：公司某個(gè)網(wǎng)站，需要實(shí)現(xiàn)圖片預(yù)覽效果，并能像淘寶一樣實(shí)現(xiàn)局部分大！

　　思索：為了考慮開發(fā)速度，最先考慮的是想使用網(wǎng)絡(luò)上的現(xiàn)成代碼！但是大致搜索了一下，網(wǎng)上可用的代碼并不多，而且部分效果并不理想！而且有些代碼，估計(jì)閱讀下來比自己寫一個(gè)成本還要高，于是產(chǎn)生了自己寫一個(gè)jquery的插件的想法！

　　原理：最起考慮的原理是，兩張圖片，一張小圖，一張大圖，先獲取鼠標(biāo)在小圖上面的坐標(biāo)，然后以一個(gè)div來顯示大圖，并根據(jù)小圖的坐標(biāo)乘以大圖除以小圖得到的倍數(shù)定位！開始是把大圖設(shè)為平鋪不重復(fù)北景，然后使用背景的position屬性來定位，理果比較理想，但是在IE6下面，圖片存在閃爍，于是改成以圖片的絕對(duì)定位方式顯示！

效果圖：

代碼：

復(fù)制代碼代碼如下:

 
/* 
* 
* JQUERY 之簡(jiǎn)易放大鏡插件-JNMagnifier 
* Author:翅膀的初衷 
* QQ:4585839 
* Date:2011-11-16 
* 
*/ 
(function($){ 
$.fn.JNMagnifier=function(setting){ 
if(setting&&setting.renderTo){ 
if(typeof(setting.renderTo)=="string"){ 
setting.renderTo = $(setting.renderTo); 
} 
}else{ 
return; 
} 
var _img_org_ = this.children("img"); 
_img_org_.css("cursor","pointer"); 
var __w = 0; 
var __h = 0; 
var __left = this.offset().left; 
var __top = this.offset().top; 
if(this.offsetParent()) 
{ 
__left+=this.offsetParent().offset().left; 
__top+=this.offsetParent().offset().top; 
} 
var _move_x = 0; 
var _move_y = 0; 
var _val_w = (setting.renderTo.width() / 2); 
var _val_h = (setting.renderTo.height() / 2); 
_img_org_.mouseover(function(){ 
setting.renderTo.html('<img src="' + _img_org_.attr("src") + '" style="position:absolute;" id="JNMagnifierrenderToImg" />'); 
setting.renderTo.show(); 
var timer = setInterval(function(){ 
__w = $("#JNMagnifierrenderToImg").width() / _img_org_.width(); 
__h = $("#JNMagnifierrenderToImg").height() /_img_org_.height(); 
if(__w>0){ 
clearInterval(timer); 
} 
},100); 
}); 
_img_org_.mouseout(function(){ 
setting.renderTo.hide(); 
}); 
_img_org_.mousemove(function(e){ 
_move_x =0-Math.round((document.documentElement.scrollLeft+e.clientX-__left) * __w - _val_w); 
_move_y =0-Math.round((document.documentElement.scrollTop+e.clientY-__top) * __h - _val_h); 
$("#JNMagnifierrenderToImg").css({"left":_move_x + "px ","top":_move_y + "px"}); 
}); 
} 
})(jQuery); 

調(diào)用方法：

復(fù)制代碼代碼如下:

 
$("#ShowPictureBox").JNMagnifier({ 
renderTo:"#ShowBigPictureBox" 
}); 

ＨＴＭＬ

復(fù)制代碼代碼如下:

 
<div id="ShowPictureBox"> 
　　<img src="圖片" width="200" height="200"> 
</div> 
<div id="ShowBigPictureBox" style=" position:absolute; overflow:hidden; display:none; border:3px solid #ccc; padding:5px; background-repeat:no-repeat; background-color:#fff; width:300px; height:300px;"> 
<!--這里顯示放大效果--> 
</div> 

注意事項(xiàng)：
這里沒有使用兩張圖片，只用了一張圖，圖片為大圖，長(zhǎng)寬必須大于放大效果ＤＩＶ的大??！默認(rèn)放大倍數(shù)為原圖與顯示小圖之間的倍數(shù)，如果需要控制放大倍數(shù)，可以手動(dòng)的為“_img_org_.mouseover”　事件中的圖片設(shè)定對(duì)應(yīng)的長(zhǎng)寬就可以實(shí)現(xiàn)

您可能感興趣的文章: