js实现缓动动画


Posted in Javascript onNovember 25, 2020

本文实例为大家分享了js实现缓动动画的具体代码,供大家参考,具体内容如下

js实现缓动动画

利用定时器来控制元素的offsetLeft的值,offsetLeft = 开始位置 + (最终位置 - 开始位置)* 缓动系数

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>

 <style>
 * {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
 }

 body {
  background-color: pink;
 }

 #nav {
  width: 900px;
  height: 63px;
  background: url("images/doubleOne.png") no-repeat right center #fff;
  margin: 0 auto;
  margin-top: 50px;
  border-radius: 5px;
  position: relative;
 }

 #nav ul {
  line-height: 70px;
 }

 #nav ul li {
  float: left;
  height: 63px;
  width: 88px;
  text-align: center;
  cursor: pointer;
  position: relative;
 }

 #t_mail {
  width: 88px;
  height: 63px;
  background: url("images/tMall.png") no-repeat;
  position: absolute;
 }
 </style>
</head>
<body>
 <nav id="nav">
 <span id="t_mail"></span>
  <ul>
  <li>双11狂欢</li>
  <li>服装会场</li>
  <li>数码家电</li>
  <li>母婴童装</li>
  <li>手机会场</li>
  <li>美妆会场</li>
  <li>家居建材</li>
  <li>进口会场</li>
  <li>飞猪旅行</li>
  </ul>
 </nav>

 <script>
 window.onload = function () {
  var nav = $('nav');
  var t_mall = nav.children[0];
  var ul = nav.children[1];
  var allLis = ul.children;
  var beginX = 0;

  for (var i = 0; i < allLis.length; i++) {
  var li = allLis[i];
  li.onmouseover = function () {
   end = this.offsetLeft;
  }

  li.onmousedown = function () {
   beginX = this.offsetLeft;
  }

  li.onmouseout = function () {
   end = beginX;
  }
  }

  var begin = 0, end = 0;
  setInterval(function () {
  begin = begin + (end - begin) / 10;
  t_mall.style.left = begin + 'px';
  }, 10)

  function $(id) {
  return typeof id ? document.getElementById(id) : null;
  }
 }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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
JavaScript实现HTML导航栏下拉菜单
Nov 25 #Javascript
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
You might like
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP _construct()函数讲解
2019/02/03 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python实现简易淘宝购物
2019/11/22 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
新教师培训方案
2014/06/08 职场文书
师范大学生求职信
2014/06/13 职场文书
党员剖析材料范文
2014/09/30 职场文书
五年级上册复习计划
2015/01/19 职场文书
小学生家长意见
2015/06/03 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书