等待-放飞梦想

<!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> new document </title> </head> <body> <img id="img" src="http://leotheme.cn/wp-content/themes/Maxthon/images/logo.png" /> <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>

提示：你可以先修改部分代码再运行。

FF IE opera 图象缩放鼠标

等待-放飞梦想

前端交互

firefox与ie 的javascript区别

CSS实现自动换行的小技巧

最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存)

鼠标滚轮缩放图象兼容[IE、FF、Opera]