这个是在一个论坛里面看到的，觉得挺有意思，复制过来备份。
直接上代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { margin:0; padding:0; }
body { width:100%; height:100%; overflow:auto; }
#img { display:block; width:20%; margin:20px auto; cursor:-webkit-zoom-in; cursor:-moz-zoom-in; border:4px solid #ccc; border-radius:4px; }
</style>
<script type="text/javascript">
window.onload = function(){
var img = document.getElementById("img");
if(img.addEventListener){
//ie9,chrome,safari,opera
img.addEventListener("mousewheel",MouseWheelHandler,false);
//firefox
img.addEventListener("DOMMouseScroll",MouseWheelHandler,false);
}
else{
//ie 6/7/8
img.attachEvent("onmousewheel",MouseWheelHandler);
}
function MouseWheelHandler(e){
var e = window.event||e;
var delta = Math.max(-1, Math.min(1,(e.wheelDelta || -e.detail)));//wheelDelta代表刚才鼠标滚轮改变的大小,正值表示往下滑，负值表示往上滑
img.style.width = Math.max(50, Math.min(800,img.width + (30*delta)))+"px";
return false;
}
}
</script>
</head>
<body>
<img id="img" src="http://cdn.21121.net/wp-content/themes/record1.2/images/random/9.jpg" alt="" />
</body>
</html>
箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明鼠标滚轮控制图片缩放！
