JS Spring effect Code _javascript tips

Although it is said that the spring effect, but in fact to achieve is the fixed-point coordinates between the acceleration and deceleration movement.
Point-to-Point movement should know what to do, and this is done by setting the left of the sliding object.
and deceleration effect, the general practice is to reduce the current value by the target value divided by a coefficient (generally positive integer), get a step.
The current value is then added with this step as the new current value, and then repeated until the current value equals the target value.
Since the step size is getting smaller, the step is the value of the move, so the deceleration effect is made.
How do you do the acceleration effect?
Because there is no acceleration step (or a method I can't think of) that can correspond to the deceleration step, I think of a way
In the beginning, the step of all deceleration is calculated and placed in an array, as the step in the deceleration, the acceleration step is the inversion of the array (that is, the upside).
This section is mainly in the SetStep () function, which can be referenced in the code.
The other parts are described in the code.

Program code:
Code

Copy Code code as follows:

var $ = function (ID) {
Return "string" = = typeof ID? document.getElementById (ID): ID;
};


function addEventHandler (Otarget, Seventtype, Fnhandler) {
if (Otarget.addeventlistener) {
Otarget.addeventlistener (Seventtype, Fnhandler, false);
else if (otarget.attachevent) {
Otarget.attachevent ("on" + Seventtype, Fnhandler);
} else {
Otarget["on" + seventtype] = Fnhandler;
}
};

var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}

Object.extend = function (destination, source) {
For (Var property in source) {
Destination[property] = Source[property];
}
return destination;
}


var bounce = class.create ();
Bounce.prototype = {
Container object, Slide object, original position, move range
Initialize:function (container, obj, Iorigin, Irange, options) {

This._obj = $ (obj);//Sliding Object
This._xo = parseint (iorigin);//Central axis coordinates (that is, original coordinates)
THIS._XT = 0;//target coordinates
THIS._XS = [];//target coordinate set
This._steps = [];//Step set
This._fast = true;//whether acceleration

This. Range = Irange | | 0;//sliding Range (width)

This. SetOptions (options);

This. Step = parseint (This.options.Step);
This. Time = parseint (this.options.Time);
This. Zoom = parseint (this.options.Zoom);
This. Reduce =!! This.options.Reduce;
This. Min = parseint (this.options.Min);
This. Max = parseint (This.options.Max);
This.onmin = This.options.onMin;
This.onmax = This.options.onMax;
This.onside = This.options.onSide;

Style settings
$ (container). style.position = "relative";
This._obj.style.position = "absolute";
This._obj.style.left = This._xo + "px";

if (this. Range > 0) this. Start ();
},
Set default Properties
Setoptions:function (options) {
This.options = {//default value
step:10,//Sliding rate of change
time:10,//Sliding delay
zoom:0,//scale Change Rate
reduce:true,//whether or not to shrink
min:0,//Minimum Range
max:0,//Maximum Range
Onmin:function () {},//execution when minimum is reached
Onmax:function () {},//execution when maximum is reached
Onside:function () {}//is executed when the boundary is reached
};
Object.extend (this.options, Options | | {});
},
Start at the Axis point
Start:function (Irange) {
Cleartimeout (This._timer);
Reset the sliding range if Irange has a value
if (Irange) this. Range = Irange;
Whether to the minimum point
if (this. Reduce && (this. Range <= 0 | | This. Range <= this. Min)) {this.onmin (); return;}
Whether to the maximum point
if (!this. Reduce && (this. Max > 0 && this. Range >= this. Max)) {This.onmax ();
Reset position
This._obj.style.left = This._xo + "px";
Set the target coordinate set (Irange may change so set each time)
This._xs = [This._xo + this. Range, This._xo, This._xo-this. Range, This._xo];
Set to accelerated state
This._fast = false;
Start Staging move
This. Set ();
},
Start from a segment
Set:function () {
Target coordinates are returned after arrival
if (this._xs.length <= 0) {
Reset Range If the scale change rate has a value
if (this. Zoom > 0) {this. Range + = (this. Reduce? -1:1) * this. Zoom; }
This. Start (); Return
}
Get target coordinates
THIS._XT = This._xs.shift ();
The target coordinates are the axis points, and now it's on the border.
if (this._xt = = This._xo) this.onside ();
Set Step size
This. SetStep ();
Start moving
This. Move ();
},
Move
Move:function () {
Cleartimeout (This._timer);
When the step is finished, it reaches the target coordinates and returns.
if (this._steps.length <= 0) {this. Set (); Return }
Perform a move
This._obj.style.left = (parseint (this._obj.style.left) + this._steps.shift ()) + "px";
Circular movement
var othis = this; This._timer = settimeout (function () {othis.move ();}, this. Time);
},
Set Step size
Setstep:function () {
var itemp = parseint (this._obj.style.left);

Attention is from the big to the small row
This._steps = [];

if (this. Step >= 1) {
var i = 0;
do{
i = (this._xt-itemp)/this. Step;
Step size cannot contain 0
if (i = = 0) {break;} else if (Math.Abs (i) < 1) {i = i > 0? 1:-1;}
This._steps.push (i = parseint (i));
Itemp = i;
} while (true);
If it's accelerated, reverse the step set.
if (this._fast) this._steps.reverse ();
}
The acceleration deceleration is alternating, so you have to take the counter every time.
This._fast =!this._fast;
}
};

To test HTML:

Copy Code code as follows:

<style type= "Text/css" >
. container{border:1px solid #000000; height:50px; width:500px;}
bounce{width:10px height:10px; background: #000000; top:20px;}
</style>
Fixed range Bounce:
<div id= "Idcontainer" class= "container" >
<div id= "idbounce" class= "Bounce" > </div>
</div>
<br/>
Range Gradient Bounce:
<div id= "IdContainer1" class= "container" >
<div id= "IdBounce1" class= "Bounce" > </div>
</div>
<br/>
Self-defined range bounce:
<div id= "IdContainer2" class= "container" >
<div id= "IdBounce2" class= "Bounce" > </div>
</div>
<br/>
Range:
<input id= "AA" Name= "" type= "text" value= "" size= "8"/>
<input id= "BB" name= "type= button" value= "Start"/>
<input id= "Idfast" name= "type=" button "value=" Acceleration + "/>
<input id= "Idslow" name= "type=" button "value=" deceleration-"/>"
<input id= "Idzoom" name= "type=" button "value=" gradually smaller "/>

Test code:

Copy Code code as follows:

New Bounce ("Idcontainer", "Idbounce", 250, 200);
var o = new Bounce ("IdContainer1", "IdBounce1", 250, 200, {
Zoom:20, max:200,
Onmax:function () {o.reduce = true; O.start (200);},
Onmin:function () {o.reduce = false; O.start (0);}
});

var O2 = new Bounce ("IdContainer2", "IdBounce2", 250);
$ ("BB"). onclick = function () {O2. Start (parseint ($ ("AA"). Value) | | 200); }
$ ("Idfast"). onclick = function () {if (--O2). STEP<2) {O2. step=2}}
$ ("Idslow"). onclick = function () {if (++O2). STEP>20) {O2. STEP=20}}
$ ("Idzoom"). onclick = function () {O2. zoom=50; }

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>javascript Spring effect </title> <script type=" Text/javascript "> var $ = function (ID) {return "string" = = typeof ID? document.getElementById (ID): ID; }; function addEventHandler (Otarget, Seventtype, Fnhandler) {if (Otarget.addeventlistener) {Otarget.addeventl Istener (Seventtype, Fnhandler, false); else if (otarget.attachevent) {otarget.attachevent ("on" + Seventtype, Fnhandler); else {otarget["on" + seventtype] = Fnhandler; } }; var Class = {Create:function () {return function () {this.initialize.apply (this, arguments); }} object.extend = function (destination, source) {for (var property in source) {Destination[property]= Source[property]; return destination; var bounce = class.create (); Bounce.prototype = {///container object, sliding object, original position, moving range initialize:function (container, obj, Iorigin, Irange, options) {T His._obj = $ (obj);//Sliding Object This._xo = parseint (Iorigin),//central axis coordinates (that is, original coordinates) THIS._XT = 0;//target coordinates this._xs = [];//destination sit The collection this._steps = [];//Step Set this._fast = true;//acceleration this. Range = Irange | | 0;//sliding Range (width) this. SetOptions (options); This. Step = parseint (This.options.Step); This. Time = parseint (this.options.Time); This. Zoom = parseint (this.options.Zoom); This. Reduce =!! This.options.Reduce; This. Min = parseint (this.options.Min); This. Max = parseint (This.options.Max); This.onmin = This.options.onMin; This.onmax = This.options.onMax; This.onside = This.options.onSide; Style set $ (container). style.position = "relative"; This._obj.style.position = "absolute"; This._obj.style.left= This._xo + "px"; if (this. Range > 0) this. Start (); },//Set default properties Setoptions:function (options) {this.options = {//default value step:10,//sliding rate of change time: 10,//Sliding delay zoom:0,//Scaling change rate reduce:true,//narrowing min:0,//minimum range Max : 0,//maximum range onmin:function () {},//when minimum is reached Onmax:function () {},//to execute at maximum time OnS Ide:function () {}//is executed when the boundary is reached); Object.extend (this.options, Options | | {}); },//starting from the axis point start:function (irange) {cleartimeout (This._timer); Irange If a value is available reset the sliding range if (irange) this. Range = Irange; Whether the minimum point if (this. Reduce && (this. Range <= 0 | | This. Range <= this. Min)) {this.onmin (); return;} Whether to the maximum point if (!this. Reduce && (this. Max > 0 && this. Range >= this. Max)) {This.onmax (); Reset position this._obj.style.left = This._xo + "px"; Set the target coordinate set (Irange may change so set each time) This._xs = [This._xo + this. Range, This._xo, This._xo-this. Range, This._xo]; Set to accelerated state This._fast = false; Start segment Move this. Set (); },///Set:function () {////target coordinates arrive after return if (this._xs.length <= 0) {//scale change rate has value to reset range if ( This. Zoom > 0) {this. Range + = (this. Reduce? -1:1) * this. Zoom; } this. Start (); Return //Get target coordinates this._xt = This._xs.shift (); The target coordinate is the middle axis point indicating that it is now on the boundary if (this._xt = = This._xo) this.onside (); Set step size this. SetStep (); Start moving this. Move (); },//Mobile Move:function () {cleartimeout (This._timer); When the step is reached, the target coordinates are returned if (this._steps.length <= 0) {this. Set (); Return //execute Mobile This._obj.style.left = (parseint (this._obj.style.left) + this._steps.shift ()) + "px"; Cyclic move var othis = this; This._timer = settimeout (function () {othis.move ();}, this. Time); },//Set step Setstep:function () {var itemp = parseint (this._obj.style.left); Note that the this._steps is from large to small rows = []; if (this. Step >= 1) {var i = 0; do{i = (this._xt-itemp)/this. Step; The step size cannot contain 0 if (i = = 0) {break;} else if (Math.Abs (i) < 1) {i = i > 0? 1:-1;} This._steps.push (i = parseint (i)); Itemp = i; } while (true); If it is accelerated, invert the step size set if (this._fast) this._steps.reverse (); //acceleration deceleration is alternating, so always take the this._fast =!this._fast; } }; Window.onload=function () {New Bounce ("Idcontainer", "Idbounce", 250, 200); var o = new Bounce ("IdContainer1", "IdBounce1", MB, {zoom:20, max:200, Onmax:function () {o.red UCE = true; O.start (200); }, Onmin:function () {o.reduce = false; O.start (0);} }); var O2 = new Bounce ("IdContainer2", "IdBounce2", 250); $ ("BB"). onclick = function () {O2. Start (parseint ($ ("AA"). Value) | | 200); } $ ("Idfast"). onclick= function () {if (--O2). STEP&LT;2) {O2. step=2} $ ("Idslow"). onclick = function () {if (++O2). STEP&GT;20) {O2. STEP=20} $ ("Idzoom"). onclick = function () {O2. zoom=50; } </script> </pead> <body> <style type= "Text/css" >. container{border:1px solid #000000; ight:50px; width:500px;} bounce{width:10px height:10px; background: #000000; top:20px;} </style> Fixed range Bounce: <div id= "Idcontainer" class= "container" > <div id= "idbounce" class= "Bounce" > </di v> </div> range Gradient Bounce: <div id= "IdContainer1" class= "container" > <div id= "IdBounce1" class= "Bounce" ; </div> </div> Custom Range Bounce: <div id= "IdContainer2" class= "container" > <div id= "idBounce2" class= "Bou" nCE "> </div> </div> Scope: <input id=" AA "Name=" "type=" text "value=" "size=" 8 "/> <input I d= "BB" "Name=" "type=" button "value=" Start "/> <input" id= "Idfast" name= "" type= "button" value= "Acceleration +"/> &LT;INP UT id= "Idslow "Name=" "type=" button "value=" deceleration-"/> <input id=" idzoom "name=" "type=" button "value=" tapering "/> T;/body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]