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

所属分类: 网络编程 / JavaScript 阅读数: 1521
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

Canvas实现放射线动画效果

本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序 image组件binderror使用例子与js中的onerror区别

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js轮播(仿慕课网)

本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Bootstrap table简单使用总结

这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序之MaterialDesign--input组件详解

本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

浅析javaScript中的浅拷贝和深拷贝

本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js时间戳和c#时间戳互转方法(推荐)

下面小编就为大家带来一篇js时间戳和c#时间戳互转方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Bootstrap模态框使用详解

这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Jil,高效的json序列化和反序列化库

下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

BootStrap实现带关闭按钮功能

这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多