管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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" /> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20oTxt%3Ddocument.getElementById(%22txt%22)%3B%20%0D%0A%2F***********************%20%0D%0A*%20%E5%87%BD%E6%95%B0%EF%BC%9A%E5%88%A4%E6%96%AD%E6%BB%9A%E8%BD%AE%E6%BB%9A%E5%8A%A8%E6%96%B9%E5%90%91%20%0D%0A*%20%E5%8F%82%E6%95%B0%EF%BC%9Aevent%20%0D%0A*%20%E8%BF%94%E5%9B%9E%EF%BC%9A%E6%BB%9A%E8%BD%AE%E6%96%B9%E5%90%91%201%EF%BC%9A%E5%90%91%E4%B8%8A%20-1%EF%BC%9A%E5%90%91%E4%B8%8B%20%0D%0A*************************%2F%20%0D%0Avar%20scrollFunc%3Dfunction(e)%7B%20%0D%0Avar%20direct%3D0%3B%20%0D%0Ae%3De%20%7C%7C%20window.event%3B%20%0D%0Aif(e.wheelDelta)%7B%20%0D%0Adirect%3De.wheelDelta%3E0%3F1%3A-1%3B%20%0D%0A%7Delse%20if(e.detail)%7B%20%0D%0Adirect%3De.detail%3C0%3F1%3A-1%3B%20%0D%0A%7D%20%0D%0AScrollText(direct)%3B%20%0D%0A%7D%20%0D%0A%2F****************************%20%0D%0A*%20%E5%87%BD%E6%95%B0%EF%BC%9A%E6%8E%A7%E5%88%B6%E6%96%87%E6%9C%AC%E6%A1%86%E6%96%87%E5%AD%97%20%0D%0A*%20%E5%8F%82%E6%95%B0%EF%BC%9A%E6%BB%9A%E8%BD%AE%E6%96%B9%E5%90%91%EF%BC%88%E7%94%B1scrollFunc%E8%BF%94%E5%9B%9E%EF%BC%89%20%0D%0A*%20%E8%BF%94%E5%9B%9E%EF%BC%9A%E6%97%A0%20%0D%0A*******************************%2F%20%0D%0Afunction%20ScrollText(arg)%7B%20%0D%0AoTxt.focus()%3B%20%0D%0Avar%20_value%3DparseInt(oTxt.value)%3B%20%0D%0Aif(arg%3E0)%7B%20%0D%0A_value%2B%2B%3B%20%0D%0A%7Delse%7B%20%0D%0A_value--%3B%20%0D%0A%7D%20%0D%0AoTxt.value%3D_value%3B%20%0D%0AoTxt.select()%3B%2F%2F%E9%80%89%E5%8F%96%E6%95%88%E6%9E%9C%20%0D%0A%7D%20%0D%0A%2F*%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6*%2F%20%0D%0Aif(document.addEventListener)%7B%20%0D%0Adocument.addEventListener('DOMMouseScroll'%2CscrollFunc%2Cfalse)%3B%20%0D%0A%7D%2F%2FW3C%20%0D%0Awindow.onmousewheel%3Ddocument.onmousewheel%3DscrollFunc%3B%2F%2FIE%2FOpera%2FChrome%20%0D%0A%3C%2Fscript%3E"> 
</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)

教程首页更多教程