鼠标滚轮缩放图象兼容ie、ff、opera



[转载] http://onlyaa.com/html/common/20080527/2178.html

<!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>


优质内容筛选与推荐>>
1、玩转Bash脚本:test测试语句
2、MapReduce源码分析总结
3、Java Objective-C AOP
4、[原]显示层||隐藏层
5、mysql函数--数学函数


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号