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


Posted in Javascript onFebruary 07, 2010

简介

实现类似于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);

效果图
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
资源
点击预览 http://demo.3water.com/js/cutePSWheel/demo.html
下载代码
Javascript 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
js函数和this用法实例分析
Mar 13 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 #Javascript
一些mootools的学习资源
Feb 07 #Javascript
Js 中debug方式
Feb 07 #Javascript
为调试JavaScript添加输出窗口的代码
Feb 07 #Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 #Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 #Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
大专学生推荐信范文
2013/11/19 职场文书
应聘面试自我评价
2014/01/24 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
2014年班级工作总结
2014/11/14 职场文书
公司开会通知
2015/04/20 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
运动会广播稿50字
2015/08/19 职场文书
计算机实训心得体会
2016/01/14 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Python入门之使用pandas分析excel数据
2021/05/12 Python