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 相关文章推荐
jquery实现pager控件示例
Apr 09 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
基于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+javascript液晶时钟
2006/10/09 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
JQuery小知识
2010/10/15 Javascript
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python中set常用操作汇总
2016/06/30 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python实现证件照换底功能
2019/08/20 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
安装python及pycharm的教程图解
2019/10/10 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
物流专业大学的自我评价
2014/01/11 职场文书
小学生新学期寄语
2014/01/19 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
校本课程教学计划
2015/01/19 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
教师思想工作总结2015
2015/05/13 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL