JS运动相关知识点小结(附弹性运动示例)


Posted in Javascript onJanuary 08, 2016

本文总结了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程序设计有所帮助。

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
js字符串转成JSON
Nov 07 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
javascript闭包入门示例
Apr 30 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
深入理解vue中的$set
Jun 01 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 #Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
pw的一个放后门的方法分析
2007/10/08 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php实现图片缩放功能类
2013/12/18 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
vue小白入门教程
2018/04/02 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python使用pil生成图片验证码的方法
2015/05/08 Python
Python 文件处理注意事项总结
2017/04/10 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
护理学院专科毕业生求职信
2014/06/28 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android