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解析XML的实现代码
Nov 12 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
关于延迟加载JavaScript
May 05 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JavaScript 是什么意思
Sep 22 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 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中AES加密解密的例子小结
2014/02/18 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
使用python实现ANN
2017/12/20 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
个人借款担保书
2014/04/02 职场文书
爱护公物演讲稿
2014/09/09 职场文书
2014年行政部工作总结
2014/11/19 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js