快捷導(dǎo)航

JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)

更新時(shí)間：2016年01月08日 10:48:00 作者：leo列

這篇文章主要介紹了JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn),總結(jié)分析了JavaScript運(yùn)動(dòng)所涉及的相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),并附帶了一個(gè)JavaScript彈性運(yùn)動(dòng)的實(shí)例供大家參考,需要的朋友可以參考下

本文總結(jié)了JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)。分享給大家供大家參考，具體如下：

1.多物體運(yùn)動(dòng)框架所有東西都不能共用

2.document.title輸出頻率不能太高

3.在寫JS時(shí)盡量避免寫小數(shù)，因?yàn)橛?jì)算機(jī)內(nèi)部都是模擬的，而不是實(shí)際存儲(chǔ)的

如：0.07*100 在JS運(yùn)算里不是為7

var a=3;
var b=3.00000000000000000001;
alert(a=b);

輸出的結(jié)果卻是true

4.寫程序思考時(shí)先思考一般，再思考特殊，寫程序是，先排除特殊，然后寫一般

if(特殊1)
{}
else if(特殊2)
{}
else
{
 一般
}

5.數(shù)組既可以用for 循環(huán)也可以用for..in循環(huán)，因?yàn)閒or循環(huán)比較可控，所以用for循環(huán)會(huì)比較的好

對(duì)象（json）的話只能用for..in循環(huán)

6.在CSS中*{margin:0;padding:0;}這樣寫性能并不怎么好

7.布局轉(zhuǎn)換，先給每個(gè)元素設(shè)置left,top值，，全部設(shè)置好了以后再給每個(gè)元素position設(shè)置absolute 并且margin清零

8.IE7中用UL進(jìn)行運(yùn)動(dòng)時(shí)會(huì)頓卡，這時(shí)候可以用DIV試試看

9.考慮摩擦力因素 iSpeed*0.95(小數(shù)的大小取決于摩擦力的大小)

10. 加速度，離目標(biāo)越遠(yuǎn)加速度越大離目標(biāo)越近越小（iTarget-obj.offsetLeft）/50

11.加速度和摩擦力比較好的組合是5和0.7 即iSpeed+=(iTarget-obj.offsetLeft)/5 ; iSpeed*=0.7;

12.當(dāng)程序出問題的時(shí)候，思考為什么會(huì)出現(xiàn)這個(gè)問題

13.彈性運(yùn)動(dòng)在樣式不能過界的時(shí)候不能用

14.彈性運(yùn)動(dòng)停止條件：距離過近速度過小

15.分析要圍觀分析，因?yàn)闃邮綍?huì)自動(dòng)的忽略小數(shù)，因此，為了不讓丟失的小數(shù)積少成多，可以設(shè)置一個(gè)變量來存儲(chǔ)，然后賦給樣式。 obj.style.left=left+"px";

附：JavaScript彈性運(yùn)動(dòng)實(shí)例

運(yùn)動(dòng)原理：加速運(yùn)動(dòng)+減速運(yùn)動(dòng)+摩擦運(yùn)動(dòng)；

代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  iSpeed += (iTarget - obj.offsetLeft)/5;
  iSpeed *= 0.7;
  left += iSpeed;
  if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
   clearInterval(obj.timer);
   obj.style.left = iTarget + 'px';
  }else{
   obj.style.left = obj.offsetLeft + iSpeed + 'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="運(yùn)動(dòng)" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>

更多關(guān)于JavaScript運(yùn)動(dòng)效果相關(guān)內(nèi)容可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: