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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
js查找节点的方法小结
Jan 13 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
vue写一个组件
Apr 09 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
phpmyadmin操作流程
2006/10/09 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
yii2安装详细流程
2018/05/23 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
基本DOM节点操作
2017/01/17 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python写xml文件的操作实例
2014/10/05 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python实现进程同步和通信的方法
2018/01/02 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
优秀学生干部个人事迹材料
2014/06/02 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
运动会加油稿30字
2015/07/21 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers