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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
vue2中的keep-alive使用总结及注意事项
Dec 21 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python list转dict示例分享
2014/01/28 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
工程专业求职自荐书范文
2014/02/08 职场文书
完美的中文自荐信
2014/05/24 职场文书
技术入股合作协议书
2014/10/07 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers