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 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
微信小程序 共用变量值的实现
Jul 12 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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
phpfans留言版用到的install.php
2007/01/04 PHP
php网页病毒清除类
2014/12/08 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
Maps Javascript
2007/01/22 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python list语法学习(带例子)
2013/11/01 Python
简单的python后台管理程序
2017/04/13 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
PyTorch的torch.cat用法
2020/06/28 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
如何将json数据转换为python数据
2020/09/04 Python
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
运动会入场词200字
2014/02/15 职场文书
雷人标语集锦
2014/06/19 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书