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 相关文章推荐
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP与以太坊交互详解
2018/08/24 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
python批量制作雷达图的实现方法
2016/07/26 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
建筑工程专业毕业生自荐信
2013/10/19 职场文书
网络编辑求职信
2014/04/30 职场文书
护士个人年度总结范文
2015/02/13 职场文书
消防演习感想
2015/08/10 职场文书
安全学习心得体会范文
2016/01/18 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python