用滑鼠滾輪來縮放圖片
這是使用 javascript 程式，用了一個 Event-onmousewheel 事件，也就是當滑鼠滾動時會觸發這 Event。
一開始圖片預設顯示大小為 100 %，當觸發 zoomPic() 函式時，會把該圖片的 id 當做參數來用，接著就判斷滾輪是往上滾還是往下滾來取得縮放比例。
且滾輪滾動一格時會觸發 Event，可以用 wheelDelta 來取得滾動多少，若大於等於 120 表示往上滾一格，則 percent 加 10 %。
小於等於 -120 表示往下滾一格，則 percent 減 10 %，但最小縮放限制為 10%。
取完縮放比例後就能進行縮放了，這邊是用 style.zoom 來指定縮放大小。
最後會回傳 false，若不回傳 false 的話，網頁也會隨著滾輪上下動喔。
如果你的滑鼠有滾輪功能，對著下面圖片然後滾動滾輪，就可以縮放該圖片了。
用滑鼠滾輪來縮放圖片
使用 javascript 程式如下：
<HEAD>
<script type="text/javascript">
<!--
	//預設原圖大小為100%
	var percent = 100;
	//縮放圖片用，參數obj為欲被縮放的圖片id
	function zoomPic(obj){
		//判斷滾輪是往上滾則加10%
		if (event.wheelDelta >= 120)	percent +=10;
		//若是往下滾則減10%，但最小是10%
		else if (event.wheelDelta <= -120  && percent >10)	percent -=10; 
		//縮放圖片用zoom
		document.getElementById(obj).style.zoom = percent + "%";
		//顯示目前是幾%用的
		document.getElementById("perc").innerText = percent + "%"; 
		//回傳false好讓頁面不會跟著滾輪上下滾
		return false;
	}
//-->
</script>
</HEAD>

<BODY>

<img id="pic" src="pics/body.jpg" onmousewheel="return zoomPic('pic');" alt="用滑鼠滾輪來縮放圖片">

</BODY>
本報導資料來源：
男丁格爾 in Xuite Xuite 日誌 Demo1 Demo2
網頁設計知識庫 Demo

請按瀏覽器的檢視原始碼查看