鼠标滚轮缩放图象兼容[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> 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 图象缩放鼠标

GOTOP1条评论 To 鼠标滚轮缩放图象兼容[IE、FF、Opera]

Semor 说道：

2008-10-21 06:58 上午

是不错

回复

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

GOTOP1条评论 To 鼠标滚轮缩放图象兼容[IE、FF、Opera]

发表评论取消回复

分类

正在加载数据...

赞助商链接

前端交互下的最新文章

最新评论

一些朋友

链接

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

GOTOP1条评论 To 鼠标滚轮缩放图象兼容[IE、FF、Opera]

发表评论 取消回复

分类

正在加载数据...

赞助商链接

前端交互下的最新文章

最新评论

一些朋友

链接

发表评论取消回复