简介 实现类似于Photoshop控制面板输入文本数字的效果，所以名称叫做PsWheel。用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值，支持正整数、小数类型输入文本。 兼容IE/Firefox/Opera/Safari/Chrom 可定义滚动变化间隔值，支持整数、浮点数 双击恢复初始值 仅3.92K，压缩后2.67K 代码 复制代码 代码如下: /* * cutePsWheel JS * Description:A js liabary which control the text type of input box can plus or minus value like Photoshop * Author:walkingp * Site:http://www.51obj.cn/ * E-mail:walkingp@126.com * Last Modified:2010-2-5 */ //Initial the wheel scroll event var _orientValue=[];//orient value var _interval=[]; var _length=[]; function InitScrollFunc(){ var eles=GetObj(); for(var i=0;i<eles.length;i++){ if(document.addEventListener){ (function(i){eles[i].addEventListener('DOMMouseScroll',function(e){e.preventDefault();e.stopPropagation();var direct=e.detail<0?1:-1;ScrollText(eles[i],direct);},false);})(i); eles[i].addEventListener('dblclick',RestoreOrientValue,false); eles[i].addEventListener('blur',RemoveScrollFunc,false); //eles[i].addEventListener('mouseover',SetFocus,false); }//W3C/Mozila (function(i){eles[i].onmousewheel=function(){ScrollFunc(event,eles[i]);}})(i);//IE/Opera/Chrome/Safari (function(i){eles[i].ondblclick=function(){RestoreOrientValue(eles[i]);;}})(i); (function(i){eles[i].onblur=function(){RemoveScrollFunc(eles[i]);;}})(i);//Remove the wheel scroll event (function(i){eles[i].onmouseover=function(){SetFocus(eles[i]);}})(i); /*Initial the value array*/ if(eles[i].value!=""){ _orientValue.push(eles[i].value); }else{ _orientValue.push(0); } if(eles[i].getAttribute("interval")){ _interval.push(parseFloat(eles[i].getAttribute("interval"))); if(eles[i].getAttribute("interval").toString().indexOf(".")>0){ var __length=parseInt(eles[i].getAttribute("interval").toString().length) - parseInt(eles[i].getAttribute("interval").toString().indexOf("."))-1; _length.push(__length);//get the length follow the decimal point }else{ _length.push(0); } }else{ _interval.push(1); _length.push(0); } } } /*set object focus*/ function SetFocus(obj){ obj.focus(); obj.select(); } /*remove the wheel scroll event*/ function RemoveScrollFunc(obj){ if(document.removeEventListener){ obj.removeEventListener('DOMMouseScroll',ScrollFunc,false); obj.removeEventListener('dblclick',RestoreOrientValue,false); }else if(document.detachEvent){ obj.detachEvent('onmousewheel',ScrollFunc); obj.detachEvent('ondblclick',RestoreOrientValue); } } /*Restore the text box's orient value when double click event trigger*/ function RestoreOrientValue(obj){ var eles=GetObj(); for(var i=0;i<eles.length;i++){ if(obj==eles[i]){ obj.value=_orientValue[i]; obj.select(); } } } //core function function ScrollFunc(){//for HTML DOM var direct=0; var e=arguments[0]||window.event; if(window.event){ window.event.returnValue=false; window.event.cancelBubble=true;//Stop event bubble } if(e.wheelDelta){ direct=e.wheelDelta>0?1:-1; } ScrollText(arguments[1],direct); } //reference by ScrollFunc function ScrollText(obj,direct){ obj.focus(); var _value=0; if(obj.value!=""){ _value=parseFloat(obj.value); } var eles=GetObj(); for(var i=0;i<eles.length;i++){ if(obj==eles[i]){ if(direct>0){ _value+=_interval[i]; }else{ _value-=_interval[i]; } obj.value=_value.toFixed(_length[i]);//calulcate the rounding result obj.select();//set select status } } } //referenced function,only get the object which has the 'rel' attribute function GetObj(){ var objs=document.getElementsByTagName('input'); var elements=[]; for(var i=0;i<objs.length;i++){ if(objs[i].type=='text' && objs[i].getAttribute('rel') == 'wheel'){ elements.push(objs[i]); } } return elements; } //Add the WheelScroll function (function AddLoadEvent(func){ var _oldonload=window.onload; if(typeof window.onload!='function'){ window.onload=func; }else{ window.onload=function(){ _oldonload(); func(); } } })(InitScrollFunc); 效果图 资源 点击预览 http://demo.jb51.net/js/cutePSWheel/demo.html下载代码

　　推荐阅读

　　Javascript 获取链接(url)参数的方法[正则与截取字符串]

当然，我们也可以用正则直接匹配，文章中也给出了一个正则的例子。 分解链接的方式： 复制代码 代码如下: <script type="text/javascript"> <!-- // 说明：Javascript 获取链接(url)参数的方法 function getQueryS>>>详细阅读

本文标题：CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库

地址：http://www.17bianji.com/kaifa2/JS/27099.html

 1/2    1