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

来源：优库美食网

一直很想做这个效果，原理是监听鼠标滚轮事件；可将此效果继续发散到其他应用上，如图片缩放，页面缩放等。

<body> 
<input type="text" id="txt" value="0" /> 
 
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)

显示全文

全部频道

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