js 彈簧效果代碼
2024-05-06 14:17:15
供稿：網友
雖然說的是彈簧效果，但實際上要實現的是定點坐標之間的加速和減速移動。
點到點的移動應該都知道怎么做，這里是通過設置滑動對象的left來實現的。
而減速效果，一般的做法是通過用目標值減當前值除以一個系數(一般為正整數)，得到一個步長。
然后當前值加上這個步長作為新的當前值，然后反復取值直到當前值等于目標值。
由于這樣得到的步長是越來越小的，而步長就是移動的值，所以就做成減速效果。
那如何做加速效果呢？
由于取不到能對應減速步長的加速的步長（或者有方法我想不到），所以我想了個方法，
一開始先把所有減速的步長算出來，放到一個數組中，作為減速時的步長，那加速的步長就是這個數組的反轉了(即倒過來)。
這個部分主要在SetStep()函數中，可參照代碼。
其他部分在代碼中都有說明。
程序代碼：
Code
代碼如下:
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 = {
//容器對象,滑動對象,原始位置,移動范圍
initialize: 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 = "absolute";
this._obj.style.left = this._xo + "px";
if(this.Range > 0) this.Start();
},
//設置默認屬性
SetOptions: function(options) {
this.options = {//默認值
Step: 10,//滑動變化率
Time: 10,//滑動延時
Zoom: 0,//縮放變化率
