JS实现的缓冲运动效果示例


Posted in Javascript onApril 30, 2018

本文实例讲述了JS实现的缓冲运动效果。分享给大家供大家参考,具体如下:

缓冲需要用到数值取整,向上取整:Math.ceil()  向下取整Math.floor()

移动的速度慢慢减慢的效果,移动速度=(终点位置 - 当前位置) / 一个数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com JS缓冲运动</title>
<style>
#div{
  width:150px;
  height:150px;
  background:#0C6;
  position:absolute;
  left:0;
  top:50px;
}
#div2{
  background:#000;
  height:600px;
  position:absolute;
  left:500px;
  width:2px;
}
</style>
</head>
<script>
var speed;
var time;
window.onload = function(){
  var btn = document.getElementById('btn');
  btn.onclick = function(){
    speed = 0;
    move(500);
  };
  btn2.onclick = function(){
    speed = 0;
    move(0);
  };
};
function move(e){
  var div = document.getElementById('div');
  clearInterval(time);
  time = setInterval(function(){
    //改变位置,如果向左则e==500, 向上取整, 否则向右,向下取整,速度=(终点位置 - 当前位置)/一个数
    e==500 ? speed = Math.ceil((e-(div.offsetLeft))/30):speed = Math.floor((e-(div.offsetLeft))/30)
    if (e <= div.style.left){//达到,关闭定时器
      clearInterval(time);
    }
    else
    {
      div.style.left = div.offsetLeft+speed+'px';
    }
  },30);
};
</script>
<body>
<input type="button" value="向右运动" id="btn" />
<input type="button" value="向左运动" id="btn2" />
<div id = "div">
</div>
<div id = "div2">
</div>
</body>
</html>

点击此处查看在线演示效果。

或者使用本站在线HTML/js运行工具测试查看运行效果:http://tools.3water.com/code/HtmlJsRun

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的表格排序
Sep 11 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
JS实现放大镜效果
Sep 21 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
Vue波纹按钮组件制作
Apr 30 #Javascript
学习JS中的DOM节点以及操作
Apr 30 #Javascript
WebSocket的通信过程与实现方法详解
Apr 29 #Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
在vscode里使用.vue代码模板的方法
Apr 28 #Javascript
JS实现的透明度渐变动画效果示例
Apr 28 #Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 #Javascript
You might like
十天学会php之第三天
2006/10/09 PHP
详解php命令注入攻击
2019/04/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
详解vue 组件
2020/06/11 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
记录Django开发心得
2014/07/16 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
python实现自主查询实时天气
2018/06/22 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
使用Pycharm分段执行代码
2020/04/15 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
如何利用Python识别图片中的文字
2020/05/31 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
生产主管岗位职责
2013/11/10 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
财政专业求职信范文
2014/02/19 职场文书
员工团队活动方案
2014/08/28 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis