zoukankan      html  css  js  c++  java
  • JavaScript中的匀速运动和变速(缓冲)运动详细介绍

     
    一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定,那就是匀速运动;如果变化的速率不一定,那么就是变速运动。当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动。 
    其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离。 

    比如匀速运动: 

    进入定时器:(每隔30ms做) 
    if(是否到达终点) 
    { 停止定时器} 
    else do{ 改变距离} 

    改变距离的方法决定是匀速还是变速(缓冲)运动。 

    匀速的比如: 
    复制代码代码如下:
     1 var timer=null; 
     2 function startMove() 
     3 { 
     4 
     5 var oDiv=document.getElementById('div1'); 
     6 clearInterval(timer); 
     7 timer=setInterval(function () { 
     8 var iSpeed=1; 
     9 
    10 if(oDiv.offsetLeft>=300) 
    11 { 
    12 clearInterval(timer); 
    13 } 
    14 else 
    15 { 
    16 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 
    17 } 
    18 },30); 
    19 }; 

    缓冲运动: 
    复制代码代码如下:
     1 var timer=null; 
     2 function startMove() 
     3 { 
     4 var iTarget=300; 
     5 
     6 var oDiv=document.getElementById('div1'); 
     7 
     8 clearInterval(timer); 
     9 timer=setInterval(function () { 
    10 var iSpeed=(iTarget-oDiv.offsetLeft)/8; 
    11 
    12 iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 
    13 
    14 iSpeed=Math.ceil(iSpeed); 
    15 if(oDiv.offsetLeft==iTarget) 
    16 { 
    17 clearInterval(timer); 
    18 } 
    19 else 
    20 { 
    21 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px'; 
    22 } 
    23 document.title=oDiv.style.left+' '+iSpeed; 
    24 },30); 
    25 }; 
    这样,一个运动框架就写好了!原理很简单,不过还有待完善。慢慢来吧!
  • 相关阅读:
    实现垂直居中
    三栏布局(双飞翼布局和圣杯布局)
    JavaScript执行机制
    使用vue-cil搭建项目
    格式化上下文formatting contexts
    定位体系(定位机制)
    CSS盒子模型
    可视化格式模型(visual formatting model)
    CSS布局开篇
    Linux之vi三种模式常用操作
  • 原文地址:https://www.cnblogs.com/hl-520/p/4244089.html
Copyright © 2011-2022 走看看