Jquery Magnify Plugin 放大鏡效果 One

Jquery Magnify Plugin 放大鏡效果 One
Jquery1.3.2Lib下載地址:https://files.cnblogs.com/davidzhou/jquery-1.3.2.rar
插件下載地址:https://files.cnblogs.com/davidzhou/jquery.magnify-1.0.2.rar
Demo下載地址:https://files.cnblogs.com/davidzhou/MagnifySol.rar

Jquery Magnify Plugin 說明
代碼 javascript引用:

客戶端代碼:

javascript代碼:

$(document).ready(function(){
//$("#d1").magnify();不帶任何設置的應用

$("#d1").magnify({
showEvent: 'click',
hideEvent: 'click',
lensWidth: 70,
lensHeight: 70,
preload: false,
stagePlacement: 'right',
loadingImage: 'Images/ajax-loader.gif',
lensCss: { backgroundColor: '#fff',
border:'1px',
opacity: 0.5
},
stageCss: { border: '1px solid #000'}
});

}
)

應用設置說明:

showEvent:'click' [由物件的click事件來開始顯示放大鏡效果],
hideEvent:'click' [由物件的click事件來隱藏放大鏡效果],
lensWidth: 70 [鼠標在小圖片中移動的鏡頭寬度],
lensHeight: 70 [鼠標在小圖片中移動的鏡頭高度],
preload: false [是否預先加載],
stagePlacement: 'right' [放大後圖片相對與小圖片顯示的位置],
loadingImage: 'Images/ajax-loader.gif' [加載圖片時提示的小圖片],
lensCss: { backgroundColor: '#fff',
             border: '0px',
             opacity: 0.5
            } [小圖片中移動的鏡頭的樣式],
stageCss: { border: '1px solid #000'} [放大後圖片的顯示樣式]

原文地址:https://www.cnblogs.com/davidzhou/p/1554180.html