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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
微信小程序实现左滑动删除效果
Mar 30 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
解析strtr函数的效率问题
2013/06/26 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
解决安装python库时windows error5 报错的问题
2018/10/21 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
小学生竞选班干部演讲稿
2014/04/24 职场文书
政治学求职信
2014/06/03 职场文书
大学毕业晚会开场白
2015/05/29 职场文书