JS实现的缓冲运动效果示例

2024-05-06 16:44:00

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的缓冲运动效果。分享给大家供大家参考，具体如下：

缓冲需要用到数值取整，向上取整:Math.ceil() 向下取整Math.floor()

移动的速度慢慢减慢的效果，移动速度=(终点位置 - 当前位置) / 一个数

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.vevb.com JS缓冲运动</title><style>#div{  width:150px;  height:150px;  background:#0C6;  position:absolute;  left:0;  top:50px;}#div2{  background:#000;  height:600px;  position:absolute;  left:500px;  width:2px;}</style></head><script>var speed;var time;window.onload = function(){  var btn = document.getElementById('btn');  btn.onclick = function(){    speed = 0;    move(500);  };  btn2.onclick = function(){    speed = 0;    move(0);  };};function move(e){  var div = document.getElementById('div');  clearInterval(time);  time = setInterval(function(){    //改变位置，如果向左则e==500， 向上取整， 否则向右，向下取整，速度=(终点位置 - 当前位置)/一个数    e==500 ? speed = Math.ceil((e-(div.offsetLeft))/30):speed = Math.floor((e-(div.offsetLeft))/30)    if (e <= div.style.left){//达到，关闭定时器      clearInterval(time);    }    else    {      div.style.left = div.offsetLeft+speed+'px';    }  },30);};</script><body><input type="button" value="向右运动" id="btn" /><input type="button" value="向左运动" id="btn2" /><div id = "div"></div><div id = "div2"></div></body></html>

点击此处查看在线演示效果。

希望本文所述对大家JavaScript程序设计有所帮助。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：学习JS中的DOM节点以及操作

下一篇：妙用缓存调用链实现JS方法的重载