jquery 圖片放大
點擊查看圖片放大效果 http://api.buruyouni.com/static/demo/%E6%94%BE%E5%A4%A7%E9%95%9C.html
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.mmogapower.co/catalog/view/script/js/common/jquery.jqzoom-core.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mmogapower.co/catalog/view/script/css/jquery.jqzoom.css">
<body>
<div style="display: flex;justify-content:center;position:relative;top:50%;align-items:Center;">
<a class="img1" href="http://www.mmogapower.net/catalog/view/script/images/subject/qcy/banner_christmas2.jpg" title="商品圖片1" >
<img style="width:200px;" src="http://www.mmogapower.net/catalog/view/script/images/subject/qcy/t5.jpg" />
</a>
<a class="img1" href="http://www.mmogapower.co/catalog/view/script/images/subject/qcy/Stereo-Mode_2020.png" title="商品圖片2" >
<img style="width:200px;" src="http://www.mmogapower.co/catalog/view/script/images/subject/qcy/Stereo-Mode_2020.png" />
</a>
</div>
</body>
<script type="text/javascript">
$(function () {
$('.img1').jqzoom({
zoomType: 'standard',
zoomWidth:450,
zoomHeight:450,
xOffset:10,
yOffset:0,
lens:true,
imageOpacity:1.0
});
})
</script>
</html>
參數說明：zoomWidht: 小圖片所選區域的寬度。
zoomHeight: 小圖片所選區域的高度。
zoomType: 默認值爲standard。如果設爲reverse，在小圖片仲，移入鼠標時，所選區域高亮，非選中區域淡灰色。
xOffset: 放大後的圖片與小圖片間的X(橫座標)距離。
yOffset: 放大後的圖片與小圖片間的Y(縱座標)距離。
position: 放大後的圖片相對原圖片的位置，默認爲"right",還可設置爲"left","top","bottom"。
lens: 布爾值，表示是否顯示小圖片中的選中區域，默認值爲"true",如果設爲"false"，則放大後的圖片上面不會出現主題字樣。
imageOpacity: 當zoomType的值爲"reverse"時，用來設置非選中區域透明度的值。取值範圍在(0.0-1.0)間。
preloadImages：布爾值，表示是否重新加載大圖像。
preloadText： 重新加載大圖像時，小圖像顯示的文本說明。
title： 大圖像頂部是否顯示<a>標籤裏的title。
showEffect: 大圖像加載時的特效，可選值:"show"表示直接顯示，"fadein"由透明度漸變載入效果。
hideEffect： 大圖像隱藏特效，可選值："hide"表示直接隱藏，"fadeout"透明度漸變隱藏。
fadeinSpeed: 當大圖像的載入特效設爲"fadein"時，此屬性可設置特效的時間，可選值爲'fast','slow',number分別代表，快慢，毫秒數。
fadtoutSpeed: 當大圖像的隱藏特效設爲"fadeout"時，此屬性可設置特效載的時間，可選值爲'fast','slow',number分別代表，快慢，毫秒數。