標籤：style blog http java 使用 os io cti
jqzoom是一款基於jQuery的圖片方法外掛程式。
使用方法：1.引入jQuery與jqzoom,jqzoom.css
2.準備兩張一大一小大小相同的圖片，小圖片放在<img>標籤的"src"屬性裡，給img標籤加個<a>標籤，<a>標籤的"href"屬性鏈向大圖片
參數說明：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分別代表，快慢，毫秒數。
例子：
HTML代碼：
<body> <div style="margin-left:500px;"> <a id="img1" href="/1big.jpg" title="我的星星" ><img src="/1small.jpg" /></a> </div></body>
js代碼：
<script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.jqzoom-core.js" type="text/javascript"></script> <link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { $(‘#img1‘).jqzoom({ zoomWidth:200, zoomHeight:200, position:"bottom",
yOffset:50, lens:true, imageOpacity:1.0 }); }) </script>
完整代碼下載
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
