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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
Python构建XML树结构的方法示例
2017/06/30 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python网页解析器使用实例详解
2020/05/30 Python
PyQt5实现简单的计算器
2020/05/30 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python os.rename实例用法详解
2020/12/06 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
四风存在的原因分析
2014/02/11 职场文书
优秀教师单行材料
2014/12/16 职场文书
大学生实习介绍信
2015/05/05 职场文书
让生命充满爱观后感
2015/06/08 职场文书
付款证明格式范文
2015/06/19 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android