溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>產品圖片放大鏡效果</title>
<script src="../jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".jqzoom").jqzoom({
zoomType:"standard",
lens:true,
preloadImages:false,
alwaysOn:false,
zoomWidth:340,
zoomHeight:340,
xOffset:10,
yOffset:0,
position:"right",
});
})
</script>
<style type="text/css">
.zoomPad{
width:340px;
height:340px;
position:relative;
z-index:90;
float:left;
}
.zoomPup{
z-index:99;
background:#fff;
opacity:0.6;
filter:alpha(opacity=60);
cursor:crosshair;
}
.zoomWrapper{
width:340px;
height"340px;
overflow:hidden;
position:relative;
border:1px solid #999;
}
.zoomWrapperTitle{
height:18px;
width:100%;
background:#999;
text-align:center;
line-height:18px;
position:absolute;
left:0;
top:0;
z-index:100;
}
</style>
</head>
<body>
<div class="jqzoomWrap">
<a href="blue_one_big.jpg" class="jqzoom" rel="gall" title>
<img src="blue_one_small.jpg" id="bigImg" title="免燙純棉條紋襯衫" alt="免燙純棉條紋襯衫" />
</a>
</div>
<div >
<h3>jqzoom.js插件的各項參數說明</h3>
zoomType ：'standard'，'reverse' 默認'standard','reverse' 的時候開啟透明;<br />
p_w_picpathOpacity ：默認0.2 透明度 開啟'reverse' 的時候可用;<br />
zoomWidth： 寬度 zoomHeight 高度 默認都是200;<br />
xOffset ：默認10 x方向放大效果div的偏移<br />
yOffset ：默認0 y方向放大效果div的偏移<br />
position： 默認'right' 可選 :'right' ,'left' ,'top' ,'bottom' 放大效果的位置<br />
lens ：默認true 被放大區域是否突出<br />
title ：默認true 標題<br />
showEffect： 默認 'show' 可選'show' ,'fadein' 開啟漸入效果<br />
hideEffect： 默認'hide' 可選 'hide' ,'fadeout' 開啟漸處效果<br />
fadeinSpeed fadeoutSpeed ：可選 'fast','slow','medium' 默認 'slow' 出 入的速度<br />
showPreload true/false：是否顯示加載<br />
preloadText： 默認 'Loading zoom' 加載是的標題<br />
preloadPosition： 默認 'center' 加載區位置（可自行更改css）
</div>
</body>
</html>有了這個插件，電商網站上產品放大鏡的效果變得很簡單了。
附件中有實例提供。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
