|
緩動(dòng)，學(xué)名為Tween，緩沖移動(dòng)的簡(jiǎn)稱。要想頁(yè)面內(nèi)容切換起來(lái)舒服，就使用淡入淡出特效，要想讓頁(yè)面元素動(dòng)起來(lái)自然，就要使用緩動(dòng)效果。這兩個(gè)混合起來(lái)，可以衍生多種特效的。感謝Flash開(kāi)發(fā)人員為我們做了那么多先行研究，我們直接把它們拆出來(lái)裝在各種菜單與相冊(cè)中。我們先從最簡(jiǎn)單的東西做起，加速與減速。
既然是緩動(dòng)，它就一定涉及以下概念：距離，時(shí)間與速度。我們可以想象存在一條直線L，點(diǎn)A與點(diǎn)B就是L的起點(diǎn)與終點(diǎn)，有一個(gè)點(diǎn)C在直線L上移動(dòng)，從點(diǎn)A到點(diǎn)B。所需的時(shí)間通常都是未知，但速度我們一定要制定。看下面的圖，我們想讓綠色的方塊在淡緊色的滑動(dòng)帶上移動(dòng)�；瑒�(dòng)帶左上角就相當(dāng)于點(diǎn)A，右上角就相當(dāng)于B點(diǎn)，方塊的左上角就相當(dāng)于點(diǎn)C，移動(dòng)距離為兩者的寬度之差。由于我們移動(dòng)的物體是存在寬度，也就是說(shuō)點(diǎn)C永遠(yuǎn)不可能與點(diǎn)B重合。但一個(gè)準(zhǔn)確的目的地（為了方便，我們把它稱之為點(diǎn)D）是必須的，我們一定要計(jì)算它出來(lái)。因?yàn)樵诩铀龠\(yùn)動(dòng)中，點(diǎn)C隨時(shí)可能超過(guò)點(diǎn)D，當(dāng)點(diǎn)超過(guò)它時(shí)，我們就要終止此移動(dòng)，并把點(diǎn)C拉回到點(diǎn)D上。
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
為了獲取它們?cè)陧?yè)面上的坐標(biāo)與尺寸，getCoords()與getStyle()又到出場(chǎng)時(shí)間了。對(duì)不起，我實(shí)在沒(méi)有意思來(lái)炫耀我的函數(shù)。更何況getStyle()被砍去了不少東西，威力沒(méi)有以前那么強(qiáng)大。
//輔助函數(shù)1
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument,
body = doc.body,
html = doc.documentElement,
clientTop = html.clientTop || body.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': top, 'left': left };
};
//輔助函數(shù)2
var getStyle = function(el, style){
if(!+"\v1"){
style = style.replace(/\-(\w)/g, function(all, letter){
return letter.toUpperCase();
});
var value = el.currentStyle[style];
(value == "auto")&&(value = "0px" );
return value;
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) javascript的緩動(dòng)效果 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) javascript的緩動(dòng)效果 [1]
第 2 頁(yè) 
