js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)


答案：一直很想做这个效果，原理是监听鼠标滚轮事件；可将此效果继续发散到其他应用上，如图片缩放，页面缩放等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>滚轮效果 -http://www.51obj.cn/</title> 
</head> 

<body> 
<input type="text" id="txt" value="0" /> 
<script type="text/javascript"> 
var oTxt=document.getElementById("txt"); 
/*********************** 
* 函数：判断滚轮滚动方向 
* 参数：event 
* 返回：滚轮方向 1：向上 -1：向下 
*************************/ 
var scrollFunc=function(e){ 
var direct=0; 
e=e || window.event; 
if(e.wheelDelta){ 
direct=e.wheelDelta>0?1:-1; 
}else if(e.detail){ 
direct=e.detail<0?1:-1; 
} 
ScrollText(direct); 
} 
/**************************** 
* 函数：控制文本框文字 
* 参数：滚轮方向（由scrollFunc返回） 
* 返回：无 
*******************************/ 
function ScrollText(arg){ 
oTxt.focus(); 
var _value=parseInt(oTxt.value); 
if(arg>0){ 
_value++; 
}else{ 
_value--; 
} 
oTxt.value=_value; 
oTxt.select();//选取效果 
} 
/*注册事件*/ 
if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
</script> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

已经ff、ie、opera、chrome测试；其中45~47行中若使用 
复制代码 代码如下:
 
/*注册事件*/ 
if(document.attachEvent){ 
document.attachEvent('onmousewheel',scrollFunc); 
}else if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',scrollFunc,false); 
} 
 
则Chrome不起作用，将其更改为 
复制代码 代码如下:
 
/*注册事件*/ 
if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 
 
即可。 
作者：王洪剑(51obj)
上一个：Lazy Load 延迟加载图片的 jQuery 插件
下一个：JQuery Dialog(JS 模态窗口,可拖拽的DIV)
更多图片编程知识: