對於一些比較小的圖片，透過滑鼠移動到圖片上進行放大顯示，原理很簡單，就是將圖片顯示的尺寸變大後放在瀏覽器的一個指定位置，從而實現圖片的放大預覽。以下是代碼： 複製代碼 代碼如下: br> BR> jQuery圖片預覽 <BR>body{font-size:12px; padding:50px;} <BR>.clsImg{padding- top:300px;} <BR>.imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;} <BR> ><script type="text/javascript"> <BR>$(function () { <BR>var x = 0; <BR>var y = 0; <BR>$("img").mouseover(function ( e) { //滑鼠移到圖片上新增事件，顯示放大圖片<BR>$("#imgShow").attr("src", this.src).show(); <BR>}); <BR>$("img").mouseout(function () { //滑鼠從圖片移開圖片隱藏<br>$("#imgShow").hide(); <br>}); <BR>}) <BR><BR> <BR> <BR><body> <BR><img class="imgAttr" id="imgShow" src="" alt=""/> <BR> <img class="clsImg" src="img1.jpg" alt=""/> <br><img class="clsImg" src="img2.jpg" alt=""/> <br><img class= "clsImg" src="img3.jpg" alt=""/> <BR><img class="clsImg" src="img4.jpg" alt=""/> <BR>
