js实现带缓动动画的导航栏效果


Posted in Javascript onJanuary 16, 2017

 话不多说,请看实例代码:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <style type="text/css">
  ul,li { padding: 0; margin: 0; }
  li { list-style: none; }
   #box{
   height: 48px;
   width: 900px;
   background-color: #459DF5;
   margin: 50px auto;
   position: relative;
   }
   #caution {
   width: 150px;
   height: 48px;
   background-color: #4B92D8;
   position: absolute;
   top: 0;
   left: 0;
   }
 #list {
 position: absolute;
 }
   #list li {
   width: 150px;
   height: 48px;
   float: left;
   color: #fff;
   font: 500 20px/48px "微软雅黑";
   text-align: center;
   cursor: pointer;
   }
  </style>
  <script type="text/javascript">
   window.onload = function(){
   //获取ul ID
   var oUl = document.getElementById("list");
   // 获取span ID
   var caution = document.getElementById("caution");
   //获取ul 所有孩子
   var aLi = oUl.children;
   //定时器管理
   var timer = null;
   //缓动
   var leader = 0;
   var target = 0;
    //停留
    var current = 0;
   for(var i = 0;i<aLi.length;i++){
     //鼠标移动
   aLi[i].onmouseover = function(){
      //关闭定时器
   clearInterval(timer);
      //获取当前的left值
   target = this.offsetLeft;
      //开启定时器
   timer = setInterval(autoCaution,20);   
   }
     //鼠标点击
     aLi[i].onmousedown = function(){
      //清楚所有高亮的文字
      for(var j = 0;j<aLi.length;j++){
       aLi[j].style.color = "#fff"; 
      }
      //当前点击栏变为红色
      this.style.color = "#ccc";
      //提示框
      current = this.offsetLeft;
      caution.style.left = current+"px";      
     }
   }
    //鼠标离开
   oUl.onmouseout = function(){
     //关闭定时器
     clearInterval(timer);
     target = current;
     timer = setInterval(autoCaution,20);
   }
   //缓动动画
   function autoCaution(){   
   leader = leader +(target - leader) /10;
   caution.style.left = leader+"px";
   }
   }
  </script>
 </head>
 <body>
  <div id="box">
  <span id="caution"></span>
  <ul id="list">
  <li>首页</li>
  <li>公司简介</li>
  <li>企业文化</li>
  <li>招贤纳士</li>
  <li>企业论坛</li>
  </ul>
  </div>
 </body>
</html>

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

Javascript 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JS实现留言板功能
Jun 17 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 #Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
JavaScript日期选择功能示例
Jan 16 #Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 #Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 #Javascript
Node.js中用D3.js的方法示例
Jan 16 #Javascript
JavaScript实现的select点菜功能示例
Jan 16 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python中的面向对象编程详解(下)
2015/04/13 Python
python类的继承实例详解
2017/03/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Django实现发送邮件功能
2019/07/18 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
python实现数字炸弹游戏程序
2020/07/17 Python
python和go语言的区别是什么
2020/07/20 Python
python开根号实例讲解
2020/08/30 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
市场营销专业推荐信
2013/11/03 职场文书
房屋转让协议书
2014/04/11 职场文书
青春无悔演讲稿
2014/05/08 职场文书
励志演讲稿800字
2014/08/21 职场文书
死者家属慰问信
2015/03/24 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript