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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
javascript getElementsByTagName
Jan 31 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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
提问的智慧
2006/10/09 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
JS中准确判断变量类型的方法
2020/06/01 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
keras的三种模型实现与区别说明
2020/07/03 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
python 常见的排序算法实现汇总
2020/08/21 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
2013年大学生的自我鉴定
2013/10/24 职场文书
人事部主管岗位职责
2013/12/26 职场文书
商场促销活动策划方案
2014/08/18 职场文书
标准单位租车协议书
2014/09/23 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript