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 AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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 三维饼图的实现代码
2008/09/28 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
python如何对实例属性进行类型检查
2018/03/20 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
怎么快速自学python
2020/06/22 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
药学专业个人的自我评价
2013/12/31 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
工程管理英文求职信
2014/03/18 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
5s推行计划书
2014/05/06 职场文书
公司出纳岗位职责
2015/03/31 职场文书
上诉答辩状范文
2015/05/22 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
详解SQL报错盲注
2022/07/23 SQL Server