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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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相关资料
2006/10/09 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
载入进度条 效果
2006/07/08 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python实现逻辑回归的方法示例
2017/05/02 Python
python实现员工管理系统
2018/01/11 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
利用python实现汉诺塔游戏
2021/03/01 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
nohup的用法
2014/08/10 面试题
应届生服装设计自我评价
2013/09/20 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年党员整改措施
2014/10/24 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
Python中字符串对象语法分享
2022/02/24 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers