Brief introduction
Implement an effect similar to the text number entered in the Photoshop Control Panel, so the name is called Pswheel. Used to control the input numeric type text box to implement the mouse wheel sliding up and down to change the value, support positive integer, decimal type input text.
Compatible Ie/firefox/opera/safari/chrom
You can define a scrolling change interval value that supports integers, floating-point numbers
Double-click Restore Initial value
3.92K only, 2.67K after compression
Code
Copy Code code as follows:
/*
* 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);
Effect chart
Resources
Click to preview http://demo.jb51.net/js/cutePSWheel/demo.html
Download code
