CutePsWheel javascript库控件输入文本框是可以通过滚轮控制的js库

简介实现类似Photoshop控制面板的输入文字和数字的效果，所以它的名字叫PsWheel。用于控制输入数字型文本框通过上下滑动鼠标滚轮来改变数值，支持正整数和小数型文本输入。

兼容IE/火狐/Opera/Safari/Chrom可定义滚动变化间隔值，支持整数、浮点数双击恢复初始值仅3.92K，压缩后2.67K代码复制代码代码如下：/* *可爱pswheel JS *描述：一个JS liabary哪个控制输入框的文字类型可以加减值像Photoshop *作者：行走的p * Site:http://www.51obj.cn/*电子邮件：[电子邮件保护]*最后修改：2010-2-5 *///初始滚轮滚动事件var _ orientValue=[]；//orient value var _ interval=[]；var _ length=[]；函数initscrolufnc(){ var eles=GetObj()；for(var I=0；雅思。长度；I){ if(文档。addeventlistener){(函数(I){ eles[I]).addEventListener(' domousesroll '，函数(e){ e . prevent default()；e . stopperpagation()；var direct=e.detail0？1:-1;ScrollText(eles[i]，direct)；}，false)；})(一)；eles[i].addEventListener('dblclick '，RestoreOrientValue，false)；eles[i].addEventListener('blur '，RemoveScrollFunc，false)；//eles[i].addEventListener('mouseover '，SetFocus，false)；}//W3C/Mozila(函数{ eles[I].onmousewheel=function(){ scrolfunc(event，eles[I])；} })(一)；//IE/Opera/Chrome/Safari(函数{ eles[I].ondblclick=function(){ restore orientvalue(eles[I])；} })(一)；（函数{ eles[I].onb lur=function(){ removescrolufnc(eles[I])；} })(一)；//删除滚轮滚动事件（功能{ eles[I]).onmouseover=function(){ SetFocus(eles[I])；} })(一)；/*初始值数组*/if(eles[i]).价值！=''){ _orientValue.push(eles[i]).值);} else { _ orientvalue。push(0)；} if(eles[i].getAttribute(' interval '){ _ interval。push(parseFloat(eles[I]).getAttribute(' interval ')；if(eles[i]).getAttribute(“间隔”).toString().indexOf(' . ')0){ var _ _ length=ParSeint(eles[I]).getAttribute(“间隔”).toString().长度)- parseInt(eles[i]).getAttribute(“间隔”).toString().indexOf(' . '))-1;_长度。push(_ _ length)；//获取小数点后的长度} else { _ length。push(0)；} } else { _ interval。推(1)；_长度。push(0)；} } }/*设置对象焦点*/函数SetFocus(obj){ obj。焦点()；物体。select()；}/*移除滚轮滚动事件*/函数removescrollFunc(obj){ if(document。removeeventlistener){ obj。removeeventlistener(' domousescroll '，ScrollFunc，false)；物体。removeeventlistener(' dbl click '，RestoreOrientValue，false)；} else if(文档。独立通风口){ obj。独立通风口(' onmousewheel '，滚动功能)；物体。discoverevent(' ondblclick '，restore orientvalue)；} }/*双击事件触发器时恢复文本框的方向值*/函数restore orientvalue(obj){ var eles=GetObj()；for(var I=0；雅思。长度；I){ if(obj==eles[I]){ obj。value=_ orientValue[I]；物体。select()；} } }//核心函数函数scrolufnc(){//对于HTML DOM var direct=0；var e=参数[0]| |窗口。事件；if(窗口。事件){ window。事件。返回值=false窗户。事件。cancelubble=true//停止事件气泡} if(e轮增量){ direct=e轮增量0？1:-1;} ScrollText(参数[1],直接);}//通过滚动功能函数引用ScrollText(obj，direct){ obj。焦点()；var _ value=0；if(obj.value！=' '){ _ value=parseFloat(obj。值)；} var eles=GetObj()；for(var I=0；雅思。长度；I){ if(obj==eles[I]){ if(direct 0){ _ value=_ interval[I]；} else { _ value-=_ interval[I]；} obj。value=_ value。to fixed(_ length[I])；//计算舍入结果物体。select()；//设置选择状态} } }//引用的函数，只获取具有' rel '属性的对象函数GetObj(){ var objs=document。getelementsbytagname(' input ')；定义变量元素=[];for(var I=0；iobjs . lentigi){ if(objs[I]).type=='text' objs[i].getAttribute(' rel ')==' wheel '){ elements。push(objs[I])；} }返回元素；}//添加车轮滚动函数（函数AddLoadEvent(func){ var _ oldonload=window。onloadwindow.onload！=' function '){ window。onload=func} else { window。onload=function(){ _ oldonload()；func()；} } })(initscrolufnc)；效果图

本字幕仅供学习交流，严禁用于商业用途