JS运动相关知识点小结(附弹性运动示例)
本文总结了JS运动相关知识点。分享给大家供大家参考，具体如下：
1.多物体运动框架所有东西都不能共用
2.document.title输出频率不能太高
3.在写JS时尽量避免写小数，因为计算机内部都是模拟的，而不是实际存储的
如：0.07*100在JS运算里不是为7
vara=3; varb=3.00000000000000000001; alert(a=b);
输出的结果却是true
4.写程序思考时先思考一般，再思考特殊，写程序是，先排除特殊，然后写一般
if(特殊1)
{}
elseif(特殊2)
{}
else
{
一般
}
5.数组既可以用for循环也可以用for..in循环，因为for循环比较可控，所以用for循环会比较的好
对象（json）的话只能用for..in循环
6.在CSS中*{margin:0;padding:0;}这样写性能并不怎么好
7.布局转换，先给每个元素设置left,top值 ，，全部设置好了以后再给每个元素position设置absolute并且margin清零
8.IE7中用UL进行运动时会顿卡，这时候可以用DIV试试看
9.考虑摩擦力因素iSpeed*0.95(小数的大小取决于摩擦力的大小)
10.加速度，离目标越远加速度越大离目标越近越小（iTarget-obj.offsetLeft）/50
11.加速度和摩擦力比较好的组合是5和0.7 即iSpeed+=(iTarget-obj.offsetLeft)/5;iSpeed*=0.7;
12.当程序出问题的时候，思考为什么会出现这个问题
13.弹性运动在样式不能过界的时候不能用
14.弹性运动停止条件：距离过近 速度过小
15.分析要围观分析，因为样式会自动的忽略小数，因此，为了不让丢失的小数积少成多，可以设置一个变量来存储，然后赋给样式。obj.style.left=left+"px";
附：JavaScript弹性运动实例
运动原理：加速运动+减速运动+摩擦运动；
代码如下：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:100px;height:100px;background:red;position:absolute;left:0;top:50px;}
</style>
<script>
window.onload=function()
{
varoBtn=document.getElementById('btn1');
varoDiv=document.getElementById('div1');
oBtn.onclick=function()
{
startMove(oDiv,300);
};
};
variSpeed=0;
varleft=0;
functionstartMove(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>
<inputid="btn1"type="button"value="运动"/>
<divid="div1"></div>
<divstyle="width:1px;height:300px;background:black;position:absolute;top:0;left:300px;">
</div>
</body>
</html>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。