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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 运动
JS运动
javascript脚本示例、javascript示例、javascript代码示例、javascript示例解析、弹性力学知识点,以便于您获取更多的相关知识。

时间: 2025-01-19 13:27:33

JS运动相关知识点小结(附弹性运动示例)_javascript技巧的相关文章

js wmp操作代码小结(音乐连播功能)_javascript技巧

WMP-网页中常见属性和方法 <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" id="wmp" width="0" height="0" style="width:0px;height:0px;"></object> //基本属性

原生js实现移动端瀑布流式代码示例_javascript技巧

瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.最近使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTo

js基于cookie方式记住返回页面用法示例_javascript技巧

本文实例讲述了js基于cookie方式记住返回页面的用法.分享给大家供大家参考,具体如下: 首先明确以下概念 ①. 同名的 cookie,不同的 domain 或不同的 path,属不同的 cookie: 同名的 cookie,相同的 domain 且相同的 path,不同的 expires,属同一个 cookie. ②. 不加过期时间的cookie在浏览器关闭后失效 ③ 二级域名cookie可以生效,通过指定domain 于是在js端 document.cookie="back_url=&qu

JS弹出窗口插件zDialog简单用法示例_javascript技巧

本文实例讲述了JS弹出窗口插件zDialog简单用法.分享给大家供大家参考,具体如下: 因为没有元素可以显示到Frameset上面去,所以重新定义了,一个index.htm,对其的操作是: Index.htm <script language="javascript" src="JS/zDialog/zDialog.js" type="text/javascript"></script> <script langua

js中scrollTop()方法和scroll()方法用法示例_javascript技巧

本文实例讲述了js中scrollTop()方法和scroll()方法用法.分享给大家供大家参考,具体如下: 设置滚动条据顶部的高度: $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度: $("div").scrollTop()://获得 scroll top offset 触发滚动事件 $(selector).scroll() 将函数绑定到滚动事件中: $(selector).scro

JS实现弹出居中的模式窗口示例_javascript技巧

本文实例讲述了JS实现弹出居中的模式窗口.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

JS基于面向对象实现的拖拽功能示例_javascript技巧

本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

JS事件添加和移出的兼容写法示例_javascript技巧

本文实例讲述了JS事件添加和移出的兼容写法.分享给大家供大家参考,具体如下: var EventUtil = { addHandler : function (element , type, handler { if ( element.addEventListener){ element.addEventListener(type, handler, false); }else if ( element.attachEvent) { element.attachEvent("on"+

JS封装通过className获取元素的函数示例_javascript技巧

本文实例讲述了JS封装通过className获取元素的函数.分享给大家供大家参考,具体如下: <div id="box"> <div class="star"></div> <div class="star"></div> <div class="app"></div> <p class="star"></