js实现缓冲运动效果的方法
更新时间：2015年04月10日 09:55:05 作者：jingangel
这篇文章主要介绍了js实现缓冲运动效果的方法,涉及javascript操作元素运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现缓冲运动效果的方法。分享给大家供大家参考。具体分析如下：
该实例可实现一开始速度很快，然后慢下来，直到停止的效果。
要点：
var speed = (target-box.offsetLeft)/8;
目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大，所以速度的值也是一直的变小
speed = speed>0?Math.ceil(speed):Math.floor(speed);
正向速度的时候向上取整，反向速度的时候向下取整
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body{margin:0; padding:0; font:12px/1.5 arial;}
#box{width:100px; height:100px; position:absolute;
background:#06c; left:0;}
-->
</style>
<script>
<!--
window.onload = function(){
var box = document.getElementById("box");
var btn = document.getElementById("btn");
var timer=null;
btn.onclick = function(){
startrun(300);
}
function startrun(target){
clearInterval(timer);
timer = setInterval(function(){
var speed = (target-box.offsetLeft)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(box.offsetLeft == target){
clearInterval(timer);
}else{
box.style.left = box.offsetLeft+speed+"px";
}
document.getElementById('abc').innerHTML+=box.offsetLeft+','+speed+'<br>';
},30);
}
}
//-->
</script>
</head>
<body>
<input id="btn" type="submit" value="向右运动">
<div id="box">
</div>
<br>
<textarea id="abc" cols="50" rows="10"
style="margin-top:130px"></textarea>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
在做网页开发的时候，有时候希望给图片设置一个备选路径，即，当src属性对应的主路径加载失败的时候，图片可以马上切换到备选路径，怎么实现呢?下面通过本文给大家分享JavaScript为一张图片设置备选路径的方法，一起看看吧2017-01-01
导致这个问题产生的原因，一般是因为js（一个比较复杂的js）写在body里面，在body元素加载完之前调用出现问题。显然，解决该问题的方法就是将这一段js放在body元素解析完毕之后。2010-11-11
本文主要介绍了在electron中如何实现图片的另存为操作,包括另存为按钮事件的编写,getImageType和saveAsPicture的主要代码,以及Electron进程与渲染进程的交互效果,希望能为使用electron的开发者提供帮助2024-10-10
use jscript Create a SQL Server database
use jscript Create a SQL Server database...2007-06-06
这篇文章主要为大家详细介绍了js实现商品抛物线加入购物车特效的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了ES6 中可以提升幸福度的小功能,在量解构赋值的用途，函数的用处等方面给大家介绍，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了JS实现移动端实时监听输入框变化的解决方案,需要的朋友可以参考下2017-04-04
javascript prototype的深度探索不是原型继承那么简单
JavaScript中对象的prototype属性，可以返回对象类型原型的引用。这是一个相当拗口的解释，要理解它，先要正确理解对象类型(Type)以及原型(prototype)的概念。2008-06-06
这篇文章主要介绍了JavaScript中获取时间的函数集，通过实例代码给大家讲解，非常详细，感兴趣的朋友一起学习吧2016-08-08
这篇文章主要介绍了leaflet加载geojson叠加显示功能代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论