jsスプリングエフェクトコード_javascriptスキル-jsチュートリアル-php.cn

バネ効果とは言いますが、実際に実現しているのは定点座標間の加減速移動です。
ポイントツーポイントの移動方法を知っておく必要があります。ここでは、スライドオブジェクトの左側を設定することによって実現されます。
減速効果については、目標値から現在値を引いた値を係数 (通常は正の整数) で除算してステップサイズを求めるのが一般的です。
次に、現在の値が新しい現在値としてこのステップサイズに追加され、現在の値がターゲット値と等しくなるまで値が繰り返し取得されます。
このようにして得られたステップサイズはどんどん小さくなり、ステップサイズは動きの値であるため、減速効果が生じます。
加速効果を作成するにはどうすればよいですか?
減速ステップサイズに対応できる加速ステップサイズが得られない(もしくは思いつかない方法がある)ので、方法を考えてみました。
まず、を全て計算してみます。減速時のステップサイズを一つにまとめます。配列では、減速時のステップサイズと加速時のステップサイズを配列の反転（つまり上下逆）とします。
この部分は主に SetStep() 関数内にあります。コードを参照してください。
その他の部分はコード内で説明しています。

プログラムコード:
コード

コードをコピーコードは次のとおりです:

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; 
} 
}; 

测试html：

复制代代码如下:

固定范围反弹：

范围渐变反弹：

自定范围反弹：

范围：

测试代：

复制代代以下:

 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; 
}; 

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; }