基于jquery編寫的放大鏡插件
更新時間:2016年03月23日 15:04:05 作者:前端小家鳥
這篇文章主要為大家詳細介紹了基于jquery編寫的放大鏡插件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了自己動手實現(xiàn)的jquery放大鏡插件,供大家參考,具體內(nèi)容如下
/**
***********************************************
**此插件使用須知--------------- **
**濾鏡(inner)與其活動區(qū)(active)之比要等于 **
**放大區(qū)(movequ)與其內(nèi)部圖片之比。如比值不相 **
**等,請改變圖片大小.------------------------**
**參數(shù)介紹 **
**active:濾鏡活動區(qū) **
**inner:濾鏡 **
**movequ:放大區(qū)域 **
**需在Html頭部引入本js腳本及jquery-1.8.3腳本 **
**如有疑問,請聯(lián)系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();
})
}
})
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
您可能感興趣的文章:
- jquery圖片放大鏡效果
- jquery實現(xiàn)放大鏡簡潔代碼(推薦)
- jQuery實現(xiàn)的放大鏡效果示例
- jQuery實現(xiàn)圖片局部放大鏡效果
- jQuery實現(xiàn)放大鏡效果實例代碼
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- 基于jQuery實現(xiàn)放大鏡特效
- jquery實現(xiàn)圖片放大鏡功能
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- 基于jquery實現(xiàn)放大鏡效果
- 使用jquery實現(xiàn)放大鏡效果
- jquery放大鏡效果超漂亮噢
- jquery圖片放大鏡功能的實例代碼
- 基于jquery的放大鏡效果
- 實現(xiàn)jquery放大鏡的兩種方法
相關文章
jQuery Validate設置onkeyup驗證的實例代碼
jQuery Validate 插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應用程序各種需求。這篇文章主要介紹了jQuery Validate設置onkeyup驗證的相關資料,需要的朋友可以參考下2016-12-12
用jquery和json從后臺獲得數(shù)據(jù)集的代碼
最近正在用ajax無刷新做網(wǎng)站,發(fā)現(xiàn)數(shù)據(jù)很好傳輸,但是數(shù)據(jù)集不知道怎么獲得,于是,上網(wǎng)查了一些資料來傳輸數(shù)據(jù),現(xiàn)在和大家分享一下,不知道的童鞋可以和我一起學習,知道的請指點一二。我選擇的方法是用json 來獲取數(shù)據(jù)集2011-11-11

