鼠標滾動改變圖片的大小：
原理：當鼠標滾動時改變了zoom的值；
<!DOCTYPE HTML>
<html>
<head>
<title>通過鼠標滾輪放大縮小圖片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {
height: 200px;
background: pink;
text-align: center;
}
img {
margin: 0 auto;
}
</style>
</head>
<script language="javascript">
function bigimg(obj) {
//obj是一個對象，初始時obj並沒有zoom屬性，所以給zoom賦值為100；
var zoom = parseInt(obj.style.zoom)||100;
//每次滾動鼠標時，改變zoom的大小
//event.wheelDelta有兩個值，120，-120，取值情況取決於滾動鼠標的方向；
zoom += event.wheelDelta/12;//每次滾動加減10；
if (zoom > 0) {
obj.style.zoom = zoom+"%";//更改后的zoom賦值給obj
console.log(obj.style.zoom);
}
return false;
}
</script>
<body>
<div>
<img src = "images/6.jpg" width="500px" heigth="450px" onmousewheel="bigimg(this)">
</div>
</body>
</html>