|
|
點(diǎn)到點(diǎn)的移動(dòng)應(yīng)該都知道怎么做，這里是通過設(shè)置滑動(dòng)對象的left來實(shí)現(xiàn)的。
而減速效果，一般的做法是通過用目標(biāo)值減當(dāng)前值除以一個(gè)系數(shù)(一般為正整數(shù))，得到一個(gè)步長。
然后當(dāng)前值加上這個(gè)步長作為新的當(dāng)前值，然后反復(fù)取值直到當(dāng)前值等于目標(biāo)值。
由于這樣得到的步長是越來越小的，而步長就是移動(dòng)的值，所以就做成減速效果。
那如何做加速效果呢？
由于取不到能對應(yīng)減速步長的加速的步長（或者有方法我想不到），所以我想了個(gè)方法，
一開始先把所有減速的步長算出來，放到一個(gè)數(shù)組中，作為減速時(shí)的步長，那加速的步長就是這個(gè)數(shù)組的反轉(zhuǎn)了(即倒過來)。
這個(gè)部分主要在SetStep()函數(shù)中，可參照代碼。
其他部分在代碼中都有說明。
程序代碼：
Code
復(fù)制代碼 代碼如下:
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 = {
//容器對象,滑動(dòng)對象,原始位置,移動(dòng)范圍
initialize: function(container, obj, iOrigin, iRange, options) {
this._obj = $(obj);//滑動(dòng)對象
this._xo = parseInt(iOrigin);//中軸坐標(biāo)(即原來坐標(biāo))
this._xt = 0;//目標(biāo)坐標(biāo)
this._xs = [];//目標(biāo)坐標(biāo)集合
this._steps = [];//步長集合
this._fast = true;//是否加速
this.Range = iRange || 0;//滑動(dòng)范圍(寬度)
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;
//樣式設(shè)置
$(container).style.position = "relative";
this._obj.style.position = "absolute";
this._obj.style.left = this._xo + "px";
if(this.Range > 0) this.Start();
},
//設(shè)置默認(rèn)屬性
SetOptions: function(options) {
this.options = {//默認(rèn)值
Step: 10,//滑動(dòng)變化率
Time: 10,//滑動(dòng)延時(shí)
Zoom: 0,//縮放變化率
Reduce: true,//是否縮小
Min: 0,//最小范圍
Max: 0,//最大范圍
onMin: function(){},//到達(dá)最小時(shí)執(zhí)行
onMax: function(){},//到達(dá)最大時(shí)執(zhí)行
onSide: function(){}//到達(dá)邊界時(shí)執(zhí)行
};
Object.extend(this.options, options || {});
},
//從軸點(diǎn)開始
Start: function(iRange) {
clearTimeout(this._timer);
//iRange有值的話重新設(shè)置滑動(dòng)范圍
if(iRange) this.Range = iRange;
//是否到了最小點(diǎn)
if(this.Reduce && (this.Range <= 0 || this.Range <= this.Min)) { this.onMin(); return; }
//是否到了最大點(diǎn)
if(!this.Reduce && (this.Max > 0 && this.Range >= this.Max)) { this.onMax(); return; }
//重置位置
this._obj.style.left = this._xo + "px";
//設(shè)置目標(biāo)坐標(biāo)集合(iRange可能會(huì)變化所以每次都要設(shè)置)
this._xs = [this._xo + this.Range, this._xo, this._xo - this.Range, this._xo];
//設(shè)置為加速狀態(tài)
this._fast = false;
//開始分段移動(dòng)
this.Set();
},
//從分段開始
Set: function() {
//目標(biāo)坐標(biāo)都到達(dá)后返回
if(this._xs.length <= 0){
//縮放變化率有值的話重新設(shè)置范圍
if(this.Zoom > 0) { this.Range += (this.Reduce ? -1 : 1) * this.Zoom; }
this.Start(); return;
}
//取得目標(biāo)坐標(biāo)
this._xt = this._xs.shift();
//目標(biāo)坐標(biāo)是中軸點(diǎn)說明現(xiàn)在是在邊界上
if(this._xt == this._xo) this.onSide();
//設(shè)置步長
this.SetStep();
//開始移動(dòng)
this.Move();
},
//移動(dòng)
Move: function() {
clearTimeout(this._timer);
//步長走完即到達(dá)目標(biāo)坐標(biāo)就返回
if (this._steps.length <= 0) { this.Set(); return; }
//執(zhí)行移動(dòng)
this._obj.style.left = (parseInt(this._obj.style.left) + this._steps.shift()) + "px";
//循環(huán)移動(dòng)
var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
},
//設(shè)置步長
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) < 1) { i = i > 0 ? 1 : -1; }
this._steps.push(i = parseInt(i));
iTemp += i;
} while (true);
//如果是加速的話反轉(zhuǎn)步長集合
if(this._fast) this._steps.reverse();
}
//加速減速是交替進(jìn)行的所以每次都要取反
this._fast = !this._fast;
}
};
測試html：
復(fù)制代碼 代碼如下:
<style type="text/css">
.container{border:1px solid #000000;height:50px; width:500px;}
.bounce{width:10px; height:10px; background:#000000;top:20px;}
</style>
固定范圍反彈：
<div id="idContainer" class="container">
<div id="idBounce" class="bounce"> </div>
</div>
<br />
范圍漸變反彈：
<div id="idContainer1" class="container">
<div id="idBounce1" class="bounce"> </div>
</div>
<br />
自定范圍反彈：
<div id="idContainer2" class="container">
<div id="idBounce2" class="bounce"> </div>
</div>
<br />
范圍：
<input id="aa" name="" type="text" value="200" size="8" />
<input id="bb" name="" type="button" value=" 開始 " />
<input id="idFast" name="" type="button" value=" 加速 + " />
<input id="idSlow" name="" type="button" value=" 減速 - " />
<input id="idZoom" name="" type="button" value=" 漸 小 " />
測試代碼：
復(fù)制代碼 代碼如下:
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; }
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
JavaScript技術(shù)：js 彈簧效果代碼，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
