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 相关文章推荐
js去除空格的12种实用方法
Nov 08 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
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 创建标签云函数代码
2010/05/26 PHP
PHP7 弃用功能
2021/03/09 PHP
$()JS小技巧
2007/07/21 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python科学画图代码分享
2017/11/29 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python os.access()用法实例
2019/02/18 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python中print函数简单使用总结
2019/08/05 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
python实现吃苹果小游戏
2020/03/21 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
会计求职信怎么写
2015/03/20 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
交通事故被告答辩状
2015/05/22 职场文书
单位更名证明
2015/06/18 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android