JS運動相關(guān)知識點小結(jié)(附彈性運動示例)
本文總結(jié)了JS運動相關(guān)知識點。分享給大家供大家參考,具體如下:
1.多物體運動框架所有東西都不能共用
2.document.title輸出頻率不能太高
3.在寫JS時盡量避免寫小數(shù),因為計算機內(nèi)部都是模擬的,而不是實際存儲的
如:0.07*100 在JS運算里不是為7
var a=3; var b=3.00000000000000000001; alert(a=b);
輸出的結(jié)果卻是true
4.寫程序思考時先思考一般,再思考特殊,寫程序是,先排除特殊,然后寫一般
if(特殊1)
{}
else if(特殊2)
{}
else
{
一般
}
5.數(shù)組既可以用for 循環(huán)也可以用for..in循環(huán),因為for循環(huán)比較可控 ,所以用for循環(huán)會比較的好
對象(json)的話只能用for..in循環(huán)
6.在CSS中*{margin:0;padding:0;}這樣寫性能并不怎么好
7.布局轉(zhuǎn)換,先給每個元素設(shè)置left,top值 ,,全部設(shè)置好了以后再 給每個元素position設(shè)置absolute 并且margin清零
8.IE7中用UL進行運動時會頓卡,這時候可以用DIV試試看
9.考慮摩擦力因素 iSpeed*0.95(小數(shù)的大小取決于摩擦力的大小)
10. 加速度,離目標越遠加速度越大 離目標越近越?。╥Target-obj.offsetLeft)/50
11.加速度和摩擦力比較好的組合是5和0.7 即iSpeed+=(iTarget-obj.offsetLeft)/5 ; iSpeed*=0.7;
12.當(dāng)程序出問題的時候,思考為什么會出現(xiàn)這個問題
13.彈性運動在樣式不能過界的時候不能用
14.彈性運動停止條件:距離過近 速度過小
15.分析要圍觀分析,因為樣式會自動的忽略小數(shù),因此,為了不讓丟失的小數(shù)積少成多,可以設(shè)置一個變量來存儲,然后賦給樣式。 obj.style.left=left+"px";
附:JavaScript彈性運動實例
運動原理:加速運動+減速運動+摩擦運動;
代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</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="運動" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; ">
</div>
</body>
</html>
更多關(guān)于JavaScript運動效果相關(guān)內(nèi)容可查看本站專題:《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
前端實現(xiàn)圖片或視頻預(yù)覽的三種方法總結(jié)
在JavaScript中實現(xiàn)前端圖片上傳即時預(yù)覽功能是一項常見的需求,特別是在網(wǎng)頁交互設(shè)計中,這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)圖片或視頻預(yù)覽的三種方法,需要的朋友可以參考下2024-06-06

