当前位置: 首页 > 图文教程 > 网络编程 > Javascript > CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库

Javascript
js select 标签选定项的值获取代码
js GridView 实现自动计算操作代码
Discuz 公告效果(自动换行,无间隙滚动)
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
JS 常用校验函数
HTML代码中标签的全部属性 中文注释说明
input 高级限制级用法
js onpropertychange输入框 事件获取属性
Javascript 生成无限下拉列表实现代码
javascript 极速 隐藏/显示万行表格列只需 60毫秒
用JavaScript实现单继承和多继承的简单方法
javascript 闭包函数做显隐内容
js 页面模块自由拖动实例
js Flash插入函数免激活代码
setTimeout 不断吐食CPU的问题分析
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
js 浏览器版本及版本号判断函数2009年
Javascript 原型和继承(Prototypes and Inheritance)
HTML 自动伸缩的表格Table js实现
两个INPUT同步输入的方法小结 兼容IE和firefox

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 352 ::
收藏到网摘: n/a

实现类似于Photoshop控制面板输入文本数字的效果,所以名称叫做PsWheel。用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值,支持正整数、小数类型输入文本。 简介
实现类似于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:[email protected]
* 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.ruanchen.com/"http://sh.ruanchen.com/" style="color: #000">下载代码