软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：Photoshop,鼠标滚轮

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

技术文章快速查找

firefox下jquery iframe刷新页面提示会导致重复之前动作

通过javascript把图片转化为字符画

javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果

实现checkbox全选、反选、取消JavaScript小脚本异常

jquery select多选框的左右移动具体实现代码

jquery和javascript的区别(常用方法比较)

基于Jquery的简单图片切换效果

兼容IE FF Opera的javascript最短的拖动代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建