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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
AngularJS转换响应内容
Jan 27 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
小程序关于请求同步的总结
May 05 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
E路文章系统PHP
2006/12/11 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
javascript json 新手入门文档
2009/12/03 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
js函数排序的实例代码
2013/07/01 Javascript
jquery等待效果示例
2014/05/01 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Bootstrap table表格简单操作
2017/02/07 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
Python中文编码那些事
2014/06/25 Python
详解Python 切片语法
2019/06/10 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
行政部工作岗位职责范本
2014/03/05 职场文书
党员对照检查材料
2014/09/22 职场文书
初中信息技术教学反思
2016/02/16 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
Pytest中conftest.py的用法
2021/06/27 Python
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
openstack云计算keystone组件工作介绍
2022/04/20 Servers