一个很实用的功能.用来缩放图片大小,在很多论坛都有看到这种效果.
<!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>
提示：你可以先修改部分代码再运行。
本文固定链接: http://www.ntxz.net/?p=1199 | 周忞 | 吉心的记事本
您必须 [ 登录 ] 才能发表留言！
用户名：
密 码：
记住我
