本文實例為大家分享了自己動手實現的jquery放大鏡插件，供大家參考，具體內容如下
/**
***********************************************
**此插件使用須知--------------- **
**濾鏡（inner）與其活動區(active)之比要等于 **
**放大區(movequ)與其內部圖片之比。如比值不相 **
**等，請改變圖片大小.------------------------**
**參數介紹 **
**active:濾鏡活動區 **
**inner:濾鏡 **
**movequ:放大區域 **
**需在Html頭部引入本js腳本及jquery-1.8.3腳本 **
**如有疑問，請聯系QQ：64047399，為你解答 **
***********************************************
**/
$.fn.extend({
yangbo:function(active,inner,movequ){
$(active).hover(function(){
$(inner).show();
$(movequ).show();
var proportionOne=$(active).width()/$(inner).width();
var proportionTwo=$(movequ).find('img').width()/$(movequ).width();
// console.log($(movequ).find('img').width());
if(proportionOne==proportionTwo){
$(this).mousemove(function(event){
//以下為右側放大
var proportionLeft=$(active).width()/$(inner).width();
var proportionTop=$(active).height()/$(inner).height();
$(movequ).scrollLeft($(inner).position().left*proportionLeft).scrollTop($(inner).position()
.top*proportionTop);
//以下為小濾鏡拖拽
$(inner).offset({
left:event.pageX-40,
top:event.pageY-40
});
//以下為判斷臨界值
if($(inner).position().left<=0){
$(inner).css({
left:0
})
}
if($(inner).position().top<=0){
$(inner).css({
top:0
})
}
if($(inner).position().left>=$(this).width()-$(inner).width()){
$(inner).css({
left:$(this).width()-$(inner).width()
})
}
if($(inner).position().top>=$(this).height()-$(inner).height()){
$(inner).css({
top:$(this).height()-$(inner).height()
})
}
})
}else{
$(active).text('圖片寬高不正確:請調整圖片寬高-->濾鏡與其父親之比應該等于右側盒子與右側圖片之比')
.css({
background:'yellow',
color:'red',
});
}
},function(){
$(inner).hide();
$(movequ).hide();
})
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
