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 相关文章推荐
IE 当eval遇上function的处理
Aug 09 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
法国足球商店:Footcenter
2019/07/06 全球购物
护士思想汇报
2014/01/12 职场文书
教育技术职业规划范文
2014/03/04 职场文书
校园公益广告语
2014/03/13 职场文书
酒店管理求职信
2014/06/09 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书