js实现缓冲运动效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 #Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python 实现选择排序的算法步骤
2018/04/22 Python
python实现俄罗斯方块
2018/06/26 Python
python常用运维脚本实例小结
2020/02/14 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
大学生实习证明范本
2014/01/15 职场文书
报关专员求职信范文
2014/02/22 职场文书
社区工作者演讲稿
2014/05/23 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
人民的好儿女观后感
2015/06/18 职场文书
订货会主持词
2015/07/01 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
python神经网络 使用Keras构建RNN训练
2022/05/04 Python