鼠标滚轮缩放图象兼容ie、ff、opera
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title> 鼠标滚轮缩放图象兼容ie、ff、opera </title>
</head>
<body>
<img id="img" src="http://www.baidu.com/img/baidu.gif">
<div id="output"></div>
<script type="text/javascript">
function scrollImage(id,speed)//被缩放图象id与缩放速度
{
var speed=speed?speed:1;
var is_ff=navigator.userAgent.toLowerCase().indexOf('firefox');
var $=function(d){return document.getElementById(d)};
var zoom=function(event){
var event=event?event:window.event;
if(is_ff>0){
$(id).style.width=$(id).offsetWidth-event.detail*speed+'px';
$("output").innerHTML=$(id).offsetWidth;//调试用,显示图象实时宽度,使用时删除
}
else{
$(id).style.width=$(id).offsetWidth+event.wheelDelta/40*speed+'px';
$("output").innerHTML=$(id).offsetWidth;//调试用,显示图象实时宽度,使用时删除
}
};
this.onload=function(){
if(is_ff>0) $("img").addEventListener("DOMMouseScroll",zoom,false);
else $("img").onmousewheel=zoom;
}
}
var img=new scrollImage("img",5);
window.onload=function(){
img.onload();
}
</script>
</body>
</html>