學會偷懶,并懶出境界是提高工作效率最有效的方法!
Ctrl + D 收藏我吧~
jqzoom圖片放大器代碼,適合產品圖片的展示,兼容主流瀏覽器,懶人圖庫推薦下載!
使用方法:
1、head區域引入
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
2、 引入js庫
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
3、調用jqzoom函數庫
<script type="text/javascript">
$(function() {
var options =
{
zoomWidth: 250, //放大鏡的寬度
zoomHeight: 250,//放大鏡的高度
zoomType:'reverse'
};
$(".jqzoom").jqzoom(options);
});
</script>
配置參數:
zoomType,默認值:’standard’,另一個值是’reverse’,是否將原圖用半透明圖層遮蓋。
zoomWidth,默認值:200,放大窗口的寬度。
zoomHeight,默認值:200,放大窗口的高度。
xOffset,默認值:10,放大窗口相對于原圖的x軸偏移值,可以為負。
yOffset,默認值:0,放大窗口相對于原圖的y軸偏移值,可以為負。
position,默認值:’right’,放大窗口的位置,值還可以是:’right’ ,’left’ ,’top’ ,’bottom’。
lens,默認值:true,若為false,則不在原圖上顯示鏡頭。
imageOpacity,默認值:0.2,當zoomType的值為’reverse’時,這個參數用于指定遮罩的透明度。
title,默認值:true,在放大窗口中顯示標題,值可以為a標記的title值,若無,則為原圖的title值。
showEffect,默認值:’show’,顯示放大窗口時的效果,值可以為: ‘show’ ,’fadein’。
hideEffect,默認值:’hide’,隱藏放大窗口時的效果: ‘hide’ ,’fadeout’。
fadeinSpeed,默認值:’fast’,放大窗口的漸顯速度(選項: ‘fast’,'slow’,'medium’)。
fadeoutSpeed,默認值:’slow’,放大窗口的漸隱速度(選項: ‘fast’,'slow’,'medium’)。
showPreload,默認值:true,是否顯示加載提示Loading zoom(選項: ‘true’,'false’)。
preloadText,默認值:’Loading zoom’,自定義加載提示文本。
preloadPosition,默認值:’center’,加載提示的位置,值也可以為’bycss’,以通過css指定位置。