jsスプリングエフェクトコード_javascriptスキル

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, argument);
}
}
}

Object.extend = function(destination, source) {
for (source の var プロパティ) {
destination[property] = source[財産];
}
戻り先;
}


var Bounce = Class.create();
Bounce.prototype = {
//コンテナ对象,滑動对象,原始位置,移動范围
初期化: function(container, obj, iOrigin, iRange, options) {

this. _obj = $(obj);//滑動对象
this._xo = parseInt(iOrigin);//中轴坐标(即原来坐标)
this._xt = 0;//目标坐标
this ._xs = [];//目标坐集合
this._steps = [];//步长集合
this._fast = true;//否加速

this.Range = iRange || 0;//滑動范围(宽度)

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;

//样式設置
$(container).style.position = "relative";
this._obj.style.position = "絶対";
this._obj.style.left = this._xo "px";

if(this.Range > 0) this.Start();
},
//設置默认プロパティ
SetOptions: function(options) {
this.options = {//默认值
ステップ: 10,//滑動变化率
時間: 10,//滑動延長
ズーム: 0,//缩放变化率
削減: true,//否缩小
最小: 0,//最小范围
最大: 0, //最大范围
onMin: function(){},// 到達最小時間実行
onMax: function(){},// 到達最大時間実行
onSide: function(){}//达边界時行行
};
Object.extend(this.options, options || {});
},
//从轴点开開始
Start: function(iRange) {
clearTimeout(this._timer);
//iRange 有值的话重新設置滑動范围
if(iRange) this.Range = iRange;
// 最小点に到達したかどうか
if(this.Reduce && (this.Range //否到達最大点
if(!this.Reduce && (this.Max > 0 && this.Range >= this.Max)) { this.onMax();戻る; }
// 重置位置
this._obj.style.left = this._xo "px";
//设置目标坐标集合(iRange 可能会变化所以每次都要设置)
this._xs = [this._xo this.Range, this._xo, this._xo - this.Range, this. _xo];
//加速状態に設定されています
this._fast = false;
//開始分節移動
this.Set();
},
//分段開始
Set: function() {
//目标坐都到達达后返
if(this._xs.length <= 0){
//放变化率有值的话重新設置范围
if(this.Zoom > 0) { this.Range = (this.Reduce ? -1 : 1) * this.Zoom;
this.Start();戻る;
}
// 取得目标坐标
this._xt = this._xs.shift();
//目标坐标是中轴点说明现在边界上
if(this._xt == this._xo) this.onSide();
//設置步长
this.SetStep();
//移動開始
this.Move();
},
//移動
Move: function() {
clearTimeout(this._timer);
//步长走完了即达目标空間标返り
if (this._steps.length <= 0) { this.Set();戻る; }
//移動移動
this._obj.style.left = (parseInt(this._obj.style.left) this._steps.shift()) "px";
//循環移動
var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
},
//設定步长
SetStep: function() {
var iTemp = parseInt(this._obj.style.left);

//注意は大到小排の
this._steps = [];

if(this.Step >= 1){
var i = 0;
do{
i = (this._xt - iTemp) / this.Step;
//步长は0を含むことはできません
if (i == 0) {break; } else if (Math.abs(i) 0 ? 1 : -1;
this._steps.push(i = parseInt(i));
iTemp = i;
} while (true);
//如果が加速の话反转敿集合
if(this._fast) this._steps.reverse();
}
//加速速は交換実行の所以次都要取反
this._fast = !this._fast;
}
};

固定范围反弹：



范围渐变反弹：



自定范围反弹：