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

2020-05-12 我要评论

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

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

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

相关文章

猜您喜欢

今日热门