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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
vue自定义组件实现双向绑定
Jan 13 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
用vue写一个日历
2020/11/02 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python中if嵌套命令实例讲解
2021/02/25 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
C语言50道问题
2014/10/23 面试题
华为慧通笔试题
2016/04/22 面试题
课前三分钟演讲稿
2014/04/24 职场文书
大学活动总结范文
2014/04/29 职场文书
教师求职信怎么写
2015/03/20 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
四则混合运算教学反思
2016/02/23 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫