首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

浅析JS运动

Posted in Javascript onDecember 28, 2015

物体运动原理：通过改变物体的位置，而发生移动变化。 任何运动都是相对的，就像物理中的运动公式：s（要达到的）=s0（当前的样式值）+vt。

方法：
      1.运动的物体使用绝对定位
      2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetLeft（offsetRight）来控制左右移动。
步骤：
    1、开始运动前，先清除已有定时器 （因为：是连续点击按钮，物体会运动越来越快,造成运动混乱）
    2、开启定时器，计算速度
    3、把运动和停止隔开（if/else),判断停止条件，执行运动

关键点：

1、多物体

将定时器附在对象上
2、链式运动

循环调用定时器：fnEnd函数里开启另外的定时器
3、多值运动

循环属性值数组：一个定时器时间，执行多个属性值得改变
判断运动结束，所有属性都到预定的值：增加一个布尔值标志，开始时，var bStop=true;     //假设：所有值都已经到了；在循环的时候判断，如果if(cur!=json[attr])   bStop=false;

一.定时器
在javascritp中，有两个关于定时器的专用函数，它们是：
1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime);

function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，以毫秒为单位。

倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。

倒计时定时器一般用于页面上只需要触发一次的的情况，比如点击某按钮后页面在一定时间后跳转到相应的站点，也可以用于判断一个浏览者是不是你的站点上的“老客”，如果不是，你就可以在5秒或者10秒后跳转到相应的站点，然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入。

循环定时器一般用于站点上需要从复执行的效果，比如一个javascript的滚动条或者状态栏，也可以用于将页面的背景用飞雪的图片来表示。这些事件需要隔一段时间运行一次。

有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename) 来关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。

二.运动研究
1.运动：匀速运动（让物体动起来）
对定时器的使用
给DIV加绝对定位
offsetLeft

问题：到达某个特定位?停符
解决：做判断，符合条件时关掉定时器(存定时器timer)
速度变慢(一般不动时间,而是改数字-速度)
用变量存速度

问题：取7时，offsetLeft没有等于300的时候,div停不下来
解决:>=300 //停在 301

问题：到300后点击按钮还继续走
原因：点击按钮,执行函数,开定时器(执行当前函数一至少执行一次)
解决:加else (没有到达目标之前才执行)

问题：连续点击，速度变快
原因：每点击一次就开一个定时器，点击几次就有几个定时器同时工作
解决：保证每次只有一个定时器工作,先cearlnterval ()

示例1,分享到：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>分享到</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  
  oDiv.onmouseover=function ()
  {
    startMove(0);
  };
  oDiv.onmouseout=function ()
  {
    startMove(-150);
  };
};

var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');
  
  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;
    
    if(oDiv.offsetLeft>iTarget)
    {
      speed=-10;
    }
    else
    {
      speed=10;
    }
    
    if(oDiv.offsetLeft==iTarget)
    {
      clearInterval(timer);
    }
    else
    {
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1">
  <span>分享到</span>
</div>
</body>
</html>

效果如下：

浅析JS运动

示例2,淡入淡出：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出</title>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  
  oDiv.onmouseover=function ()
  {
    startMove(100);
  };
  oDiv.onmouseout=function ()
  {
    startMove(30);
  };
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');
  
  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;
    
    if(alpha<iTarget)
    {
      speed=10;
    }
    else
    {
      speed=-10;
    }
    
    if(alpha==iTarget)
    {
      clearInterval(timer);
    }
    else
    {
      alpha+=speed;
      
      oDiv.style.filter='alpha(opacity:'+alpha+')';
      oDiv.style.opacity=alpha/100;
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

效果如下：

浅析JS运动

匀速运动的停止条件
距离足够近

示例3,匀速运动的停止条件：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>匀速运动的停止条件</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;

function startMove(iTarget)
{
  var oDiv=document.getElementById('div1');
  
  clearInterval(timer);
  timer=setInterval(function (){
    var speed=0;
    
    if(oDiv.offsetLeft<iTarget)
    {
      speed=7;
    }
    else
    {
      speed=-7;
    }
    
    if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
    {
      clearInterval(timer);
      
      oDiv.style.left=iTarget+'px';
    }
    else
    {
      oDiv.style.left=oDiv.offsetLeft+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

2.变速运动（缓冲运动）
逐渐变慢,最后停止
距离越远速度越大
    速度有距离决定
    速度=(目标值-当前值)/缩放系数
    如果没有缩放系数t速度太大,瞬间到达终点.没有过程

问题：并没有真正到达300
原因：速度只剩0.9    //像素是屏幕能够显示的最/J库位，并不会四舍五入掉
Math.ceil ()向上取整
Math.floor ()向下取整

问题：向左走，又差一块--Math.floor ()
判断：三目 speed=speed>0 ? Math.ceil ( speed ): Math.floor ( speed )

示例,缓冲运动：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
  var oDiv=document.getElementById('div1');
  setInterval(function (){
    var speed=(300-oDiv.offsetLeft)/10;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    
    oDiv.style.left=oDiv.offsetLeft+speed+'px';
    
    document.title=oDiv.offsetLeft+','+speed;
  }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

效果如下：

浅析JS运动

3.多物体运动
多个div ,鼠标移入变宽
    运动框架传参obj,知道让哪个物体动起来
    用到缓冲一定要取整

问题：div没运动回去    //清除前一个定时器
原因：只有一个定时器
解决：加物体上的定时器，使每个物体都有一个定时器。定时器作为物体属性

多个div淡入淡出
首先关闭物体上的定时器
经验：多物体运动框架所有东西都不能共用

问题：不是因为定时器,而是因为alpha
解决：作为属性附加到物体上    /不以变量形式存在

offset 的 bug

加border变宽

offsetWith并不是真正的width ,它获取的是盒模型尺寸
解决：躲着  宽度扔到行间,parselnt ( oDiv.style.width )

进一步解决： getStyle ( obj, name ) currentStyle , getComputedStyle
加border ,只要offset就有问题 去掉offset

示例,多物体运动：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:100px; height:50px; background:red; margin:10px; border:10px solid black;}
</style>
<script>
window.onload=function ()
{
  var aDiv=document.getElementsByTagName('div');
  
  for(var i=0;i<aDiv.length;i++)
  {
    aDiv[i].timer=null;
    
    aDiv[i].onmouseover=function ()
    {
      startMove(this, 400);
    };
    
    aDiv[i].onmouseout=function ()
    {
      startMove(this, 100);
    };
  }
};

function startMove(obj, iTarget)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    var speed=(iTarget-obj.offsetWidth)/6;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    
    if(obj.offsetWidth==iTarget)
    {
      clearInterval(obj.timer);
    }
    else
    {
      obj.style.width=obj.offsetWidth+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果如下：

浅析JS运动

4.任意值运动
任意值运动的单位分为透明度和px。

px单位的任意值

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
</style>
<script>
window.onload=function ()
{
  var oDiv1=document.getElementById('div1');
  oDiv1.onmouseover=function (){startMove(this, 'height', 400);};
  oDiv1.onmouseout=function (){startMove(this, 'height', 200);};
  
  var oDiv2=document.getElementById('div2');
  
  oDiv2.onmouseover=function (){startMove(this, 'width', 400);};
  oDiv2.onmouseout=function (){startMove(this, 'width', 200);};
  
  var oDiv3=document.getElementById('div3');
  oDiv3.onmouseover=function (){startMove(this, 'fontSize', 50);};
  oDiv3.onmouseout=function (){startMove(this, 'fontSize', 14);};
  
  var oDiv4=document.getElementById('div4');
  oDiv4.onmouseover=function (){startMove(this, 'borderWidth', 100);};
  oDiv4.onmouseout=function (){startMove(this, 'borderWidth', 10);};
};

function getStyle(obj, name)
{
  if(obj.currentStyle){return obj.currentStyle[name];}
  else{return getComputedStyle(obj, false)[name];}
}

function startMove(obj, attr, iTarget)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    var cur=parseInt(getStyle(obj, attr));
    
    var speed=(iTarget-cur)/6;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    
    if(cur==iTarget)
    {
      clearInterval(obj.timer);
    }
    else
    {
      obj.style[attr]=cur+speed+'px';
    }
  }, 30);
}
</script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">safasfasd</div>
<div id="div4"></div>
</body>
</html>

效果如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
</style>
<script>
window.onload=function ()
{
var oDiv1=document.getElementById('div1');
oDiv1.onmouseover=function (){startMove(this, 'height', 400);};
oDiv1.onmouseout=function (){startMove(this, 'height', 200);};

var oDiv2=document.getElementById('div2');

oDiv2.onmouseover=function (){startMove(this, 'width', 400);};
oDiv2.onmouseout=function (){startMove(this, 'width', 200);};

var oDiv3=document.getElementById('div3');
oDiv3.onmouseover=function (){startMove(this, 'fontSize', 50);};
oDiv3.onmouseout=function (){startMove(this, 'fontSize', 14);};

var oDiv4=document.getElementById('div4');
oDiv4.onmouseover=function (){startMove(this, 'borderWidth', 100);};
oDiv4.onmouseout=function (){startMove(this, 'borderWidth', 10);};
};

function getStyle(obj, name)
{
if(obj.currentStyle){return obj.currentStyle[name];}
else{return getComputedStyle(obj, false)[name];}
}

function startMove(obj, attr, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=parseInt(getStyle(obj, attr));

var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style[attr]=cur+speed+'px';
}
}, 30);
}
</script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">safasfasd</div>
<div id="div4"></div>
</body>
</html>

效果如下：

浅析JS运动

透明度的任意值，需要做判断：

判断
var cur=0
if ( attr== 'opacity '){
cur=parseFloat ( getStyle ( obj, attr)) *100
}else{

}
设置样式判断
if ( attr== 'opacity '){
obj.style.fiIter = 'alpha ( opacity: '( cur+speed ) + ')'
obj.style.opacity= ( cur+speed ) /100
}else{

}

5.链式运动
多出来的一个参数，只有传进去的时候才调用
鼠标移入变宽，结束之后弹出abc
先横向展开.再以向展开
鼠标移出,先变回不透明，变矮，变窄

三.封装运动框架

基于以上的分析与总结，封装运动框架move.js如下：

function getStyle(obj, name)
{
  if(obj.currentStyle)
  {
    return obj.currentStyle[name];
  }
  else
  {
    return getComputedStyle(obj, false)[name];
  }
}

function startMove(obj, json, fnEnd)
{
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){
    var bStop=true;    //假设：所有值都已经到了
    
    for(var attr in json)
    {
      var cur=0;
      
      if(attr=='opacity')
      {
        cur=Math.round(parseFloat(getStyle(obj, attr))*100);
      }
      else
      {
        cur=parseInt(getStyle(obj, attr));
      }
      
      var speed=(json[attr]-cur)/6;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(cur!=json[attr])
        bStop=false;
      
      if(attr=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else
      {
        obj.style[attr]=cur+speed+'px';
      }
    }
    
    if(bStop)
    {
      clearInterval(obj.timer);
            
      if(fnEnd)fnEnd();
    }
  }, 30);
}

move.js运动框架基本满足现在网页上所有动画的需求（不包括css3）。

以上就是本文的全部内容，希望对大家的学习有所帮助。

浅析JS运动

- Author -

jingwhale

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
原生js实现轮播图特效
May 04 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
10分钟学会js处理json的常用方法
Dec 06 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
Node.js实现断点续传
Jun 23 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 #Javascript
js时间戳转为日期格式的方法
Dec 28 #Javascript
jquery实现全屏滚动
Dec 28 #Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 #Javascript
延时加载JavaScript代码提高速度
Dec 27 #Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 #Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 #Javascript
放大器(1) 矿石收音机(1) E1-XM(1) DSP(2) R601SW(1) 沃尔沃(1) S900(1) 电子管(5) ETON(1) 接收机(2)
You might like
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
Javascript之文件操作
2007/03/07 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
vue安装和使用scss及sass与scss的区别详解
2018/10/15 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
gearman的安装启动及python API使用实例
2014/07/08 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
django queryset相加和筛选教程
2020/05/18 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌：ONETEASPOON
2018/11/20 全球购物
英国领先的维生素和营养补充剂直接供应商：Healthspan
2019/04/22 全球购物
加拿大在线隐形眼镜和眼镜店：VisionPros
2019/10/06 全球购物
祖国在我心中演讲稿600字
2014/05/04 职场文书
学校运动会霸气口号
2014/06/07 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers