js实现带简单弹性运动的导航条


Posted in Javascript onFebruary 22, 2017

晚上跟着视频敲了下 弹性菜单的代码,先记下来

效果如下:

js实现带简单弹性运动的导航条

代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 *{
  margin:0;
  padding:0;
 }
 .ul1{
  width:450px;
  height:30px;
  margin:20px auto;
  position:relative;
 }
 li{
  list-style:none;
  line-height:30px;
  height:30px;
  width:100px;
  color:orange;
  text-align:center;
  float:left;
  margin-right:5px;
  border:1px soli #000;
  background-color:red;
 }
 .mark{
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
 }
 .mark ul{
  width:450px;
  position:absolute;
  left:0;
  top:0;
 }
 .mark ul li{
  color:#fff;
  background-color:deepskyblue;
 }
 </style>
</head>
<body>
<ul class="ul1">
 <li class="mark">
 <ul>
  <li>首页</li>
  <li>论坛</li>
  <li>视频</li>
  <li>课程</li>
 </ul>
 </li>
 <li class="box">首页</li>
 <li class="box">论坛</li>
 <li class="box">视频</li>
 <li class="box">课程</li>
</ul>
</body>
<script>
 window.onload = function(){
 var oMark = document.querySelector('.mark');
 var oBox = document.querySelectorAll('.box');
 var childUl = oMark.querySelector('ul');
 var timer = null;
 var timer2 = null;//延迟定时器,100毫秒人的眼睛是察觉不出来的
 var iSpeed = 0;
 for (var i=0;i<oBox.length;i++){
  oBox[i].onmouseover = function(){
  clearTimeout(timer2);
  startMove(this.offsetLeft);
  };
  oBox[i].onmouseout = function(){
  timer2 = setTimeout(function(){
   startMove(0);
  },100);

  };
 }
 oMark.onmouseover = function(){
  clearTimeout(timer2);
 };
 oMark.onmouseout= function(){
  timer2 = setTimeout(function(){
  startMove(0);
  },100);
 };
 function startMove(iTarget){
  clearInterval(timer);
  timer = setInterval(function(){
  iSpeed += (iTarget -oMark.offsetLeft)/5;
  iSpeed *= 0.75;
  if(Math.abs(iSpeed)<=1 && Math.abs(iTarget -oMark.offsetLeft)<=1){
   clearInterval(timer);
   oMark.style.left = iTarget + 'px';
   childUl.style.left = -iTarget + 'px';
   iSpeed = 0;
  }else {
   oMark.style.left = oMark.offsetLeft + iSpeed +'px';
   childUl.style.left = -oMark.offsetLeft +'px';
  }
  },30);
 };
 };
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
Js四则运算函数代码
Jul 21 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 #Javascript
You might like
十天学会php之第十天
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
基于vue2.0动态组件及render详解
2018/03/17 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python中metaclass原理与用法详解
2019/06/25 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python: 传递列表副本方式
2019/12/19 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
五一劳动节活动记录
2014/03/23 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
管辖权异议上诉状
2015/05/23 职场文书
学雷锋感言
2015/08/03 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
python基础之类方法和静态方法
2021/10/24 Python