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返回顶部效果(自写代码)
Jan 06 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
Vue简单实现原理详解
2020/05/07 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python实现两款计算器功能示例
2017/12/19 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
你常见到的runtime exception
2016/09/05 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
红旗方阵解说词
2014/02/12 职场文书
现金出纳岗位职责
2014/03/15 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
学雷锋倡议书
2015/01/19 职场文书
让生命充满爱观后感
2015/06/08 职场文书
西游记读书笔记
2015/06/25 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
职工宿舍管理制度
2015/08/05 职场文书
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python