鼠标滚动改变图片的大小：
原理：当鼠标滚动时改变了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>