javascript实现左右缓动动画函数


Posted in Javascript onNovember 25, 2020

本文实例为大家分享了js实现左右缓动动画函数的封装代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="bootstrap-4.4.1.css" >
 <style>
 
 .box{
 width: 100px;
 height: 100px;
 background-color: chartreuse;
 position:absolute;
 }
 </style>
 </head>
 <body>

 <button class="btn1">移动400px</button>
 <button class="btn2">移动800px</button>
 <div class="box"></div>

 <script>

 let btn1 = document.querySelector('.btn1');
 let btn2 = document.querySelector('.btn2');
 let box = document.querySelector('.box');

 btn1.onclick = function(){
 animate(box,400);
 }

 btn2.onclick = function(){
 animate(box,800);
 }

 // 缓动动画
 function animate(element,target){
 // 清除定时器
 clearInterval(element.timeId);

 element.timeId = setInterval(function(){
  // 获取元素当前的位置
  let current = element.offsetLeft;
  // 当current越大,step越小,先快后慢
  let step = (target - current) / 10;
  // 当step大于0时,step向上取整,否则,step向下取整
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  current += step;
  element.style.left = current + 'px';
  // 不用担心到达不了目标位置,因为step最小达到1
  if(current == target){
  clearInterval(element.timeId);
  }
  console.log("目标位置:" + target + "当前位置:" + current + "每次移动的步数:" + step);
 },20);
 }

 </script>
 
 </body>
</html>

javascript实现左右缓动动画函数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
用正则获取指定路径文件的名称
Feb 27 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 #Javascript
js实现缓动动画
Nov 25 #Javascript
JavaScript实现缓动动画
Nov 25 #Javascript
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
JavaScript实现网页动态生成表格
Nov 25 #Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
You might like
php intval的测试代码发现问题
2008/07/27 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python PIL图片添加字体的例子
2019/08/22 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
创业计划书撰写原则
2014/01/25 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书