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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
script标签属性用type还是language
Jan 21 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 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
JavaScript实现HTML导航栏下拉菜单
Nov 25 #Javascript
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
php工具型代码之印章抠图
2018/07/18 PHP
jQuery 一个图片切换的插件
2011/10/09 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Pandas中resample方法详解
2019/07/02 Python
django的csrf实现过程详解
2019/07/26 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
django API 中接口的互相调用实例
2020/04/01 Python
大门门卫岗位职责
2013/11/30 职场文书
师范生自我鉴定
2014/03/20 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
详解Vue的options
2021/05/15 Vue.js