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

Aug012010

作者：吉心发布：2010-08-01 09:47 分类：Jquery 阅读：1389 次抢沙发

一个很实用的功能.用来缩放图片大小,在很多论坛都有看到这种效果.

<!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 | 周忞 | 吉心的记事本

该日志由吉心于2010年08月01日发表在 Jquery 分类下，你可以发表评论。
在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 鼠标滚轮缩放图象兼容[IE、FF、Opera] | 周忞 | 吉心的记事本
关键字: jqery, 鼠标缩放图片

【上一篇】关于Tab(选项卡)的一些实现方式
【下一篇】一些三角形的CSS写法

您可能还会对这些文章感兴趣！

鼠标滚轮缩放图象兼容[IE、FF、Opera]：等您坐沙发呢！

发表评论

您必须 [ 登录 ] 才能发表留言！

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

您可能还会对这些文章感兴趣！

鼠标滚轮缩放图象兼容[IE、FF、Opera]：等您坐沙发呢！

发表评论

分类

最新日志热评日志随机日志

最新评论

标签云集

博客统计

用户登录