JS运动相关知识点小结(附弹性运动示例)
本文总结了JS运动相关知识点。分享给大家供大家参考，具体如下：
1.多物体运动框架所有东西都不能共用
2.document.title输出频率不能太高
3.在写JS时尽量避免写小数，因为计算机内部都是模拟的，而不是实际存储的
如：0.07*100 在JS运算里不是为7
var a=3; var b=3.00000000000000000001; alert(a=b);
输出的结果却是true
4.写程序思考时先思考一般，再思考特殊，写程序是，先排除特殊，然后写一般
if(特殊1)
{}
else if(特殊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弹性运动实例
运动原理：加速运动+减速运动+摩擦运动；
代码如下：
<!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>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍JS面向对象的程序设计相关知识小结，包括了JS面向对象的程序设计相关知识小结的使用技巧和注意事项，需要的朋友参考一下 面向对象的语言有一个标志，即拥有类的概念，抽象实例对象的公共属性与方法，基于类可以创建任意多个实例对象，一般具有封装、继承、多态的特性！但JS中对象与纯面向对象语言中的对象是不同的，ECMA标准定义JS中对象：无序属性的集合，其属性可以包含基本值、对象或者函数。可以简
-
本文向大家介绍JS动画定时器知识总结，包括了JS动画定时器知识总结的使用技巧和注意事项，需要的朋友参考一下 广义说：一切通过js改变的视觉呈现都叫动画；例如，按钮，链接等元素交互反馈。 狭义说：通过定时器连续调用js函数进行元素属性改变产生的视觉动画效果。 定时器 定时器是JavaScript动画的核心技术； setTimeout(),setInterval()是大家熟知的，以前经常使用的； 一般
-
本文向大家介绍Python列表list操作相关知识小结，包括了Python列表list操作相关知识小结的使用技巧和注意事项，需要的朋友参考一下 当然，温习的同时也要发散思考，因为有些看似无关紧要的、约定俗成的语言习惯，例如数组索引为何从0开始，其背后可能大有来历。知其然，亦需知其所以然啊喵喵喵~~~ 最后，在基础知识之上，更要探索进阶，例如学习生成器表达式，这样既能更扎实地掌握基础，又能融会贯通，
-
Java 相关知识点汇总，包括 Java 基础、Java 容器、Java 并发、JVM、编程规范、数据结构与算法、数据库、系统设计、设计模式、数据通信、网站架构、备战面试、Github 榜单。
-
本小节会将会介绍前端的相关基础知识，这些是后面 Django 的模板系统中必要的基础知识。我们会在开发的 Django 项目中制作一些简单的页面，需要用到这里的内容。 1. HTML HTML 的中文全称叫做超文本标记语言，是创建网页应用的标准语言。超文本的含义大概是指，不仅仅是文本，还可以包括图片、链接、视频等等 。HTML 语言可以用来描述网页结构，我们在浏览相关网站时，会接收对应网站发来的
-
本文向大家介绍CodeIgniter常用知识点小结，包括了CodeIgniter常用知识点小结的使用技巧和注意事项，需要的朋友参考一下 本文简单总结了CodeIgniter开发中的常用知识点。分享给大家供大家参考，具体如下： 跳转： 常量定义： config/constants.php 关于语言文件： 只说我自己的做法 为了统一管理错误信息 决定做一个error_lang.php 在applica