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获得选中文本内容的方法
Dec 02 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
angular中的cookie读写方法
Aug 02 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
vue 授权获取微信openId操作
Nov 13 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
PHP 的几个配置文件函数
2006/12/21 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python实现的自定义多线程多进程类示例
2018/03/23 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python关闭占用端口方式
2019/12/17 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python re.match()用法相关示例
2021/01/27 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
销售总监岗位职责
2014/01/04 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
学生感冒英文请假条
2014/02/04 职场文书
总经理任命书
2014/03/29 职场文书
校园安全标语
2014/06/07 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2016年公司新年寄语
2015/08/17 职场文书
python 模块重载的五种方法
2021/04/24 Python