JavaScript实现精美个性导航栏筋斗云效果


Posted in Javascript onOctober 29, 2017

实现效果:

实现效果如下图所示

JavaScript实现精美个性导航栏筋斗云效果

实现原理:

什么是筋斗云效果:

•这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。

实现思路:

•鼠标经过的时候,利用offsetLeft获得当前盒子距离左侧的距离,把这个值赋给缓动动画的end值。
•当点击的时候记住当前的offsetLeft值,当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。

实现代码:

下面是实现代码以及详细注释,核心设置一个position为absolute的span标签,通过绑定鼠标事件,用封装好的animate动画实现span的“筋斗云”效果。

<!DOCTYPE html>
<html>
<head>
  <title>导航栏筋斗云效果</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background-color: rgba(0, 0, 0, 0.6);
    }
    .box{
      width: 415px;
      height: 42px;
      margin: 200px auto;
      background-color: #fff;
      position: relative;
    }
    ul{
      list-style: none;
      position: relative;
    }
    li{
      float: left;
      width: 83px;
      height: 42px;
      text-align: center;
      font: 500 15px/42px "微软雅黑";
      cursor: pointer;
    }
    span{
      position: absolute;
      left: 0;
      top: 0;
      width: 83px;
      height: 42px;
      background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
    }
  </style>
</head>
<body>
<div class="box">
  <span></span>
  <ul>
    <li>菜单栏1</li>
    <li>菜单栏2</li>
    <li>菜单栏3</li>
    <li>菜单栏4</li>
    <li>菜单栏5</li>
  </ul>
</div>
<script type="text/javascript">
  window.onload = function(){
    // 鼠标放在哪个li上面,span对应一道到哪里,移开后回到原位置
    var liArr = document.getElementsByTagName("li");
    var liWidth = liArr[0].offsetWidth;
    var span = document.getElementsByTagName("span")[0];
    // 计数器
    var cnt = 0;
    // for循环绑定事件
    for(var i=0; i<liArr.length; i++){
      // 自定义属性,然后绑定index属性为索引值
      liArr[i].index = i;
      // 鼠标进入事件
      liArr[i].onmouseover = function(){
        // 然span运动到该li的索引值位置
        animate(span, this.index*liWidth);
      }
      // 鼠标移开
      liArr[i].onmouseout = function(){
        // span运动到原位置
        animate(span, cnt*liWidth);
      }
      // 点击事件
      liArr[i].onclick = function(){
        // 计数器记录当前标签索引值
        cnt = this.index;
        animate(span, cnt*liWidth);
      }
    }
    // 缓动动画封装
    function animate(element, target){
      // 清除间歇调用
      clearInterval(element.timer);
      // 设置超时调用
      element.timer = setInterval(function(){
        // 设置步数
        var step = (target - element.offsetLeft)/10;
        // 调整步数
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 设置样式
        element.style.left = element.offsetLeft + step + "px";
        // console.log(1);
        if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
          element.style.left = target + "px";
          clearInterval(element.timer);
        }
      }, 20);
    }
  }
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JavaScript实现精美个性导航栏筋斗云效果,希望对大家有所帮助!

Javascript 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
JS模板实现方法
Apr 03 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
vue中的scope使用详解
Oct 29 #Javascript
Vue.js划分组件的方法
Oct 29 #Javascript
vue.js  父向子组件传参的实例代码
Oct 29 #Javascript
vue.js todolist实现代码
Oct 29 #Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 #Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
bootstrap table sum总数量统计实现方法
Oct 29 #Javascript
You might like
PHP setTime 设置当前时间的代码
2012/08/27 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
python self,cls,decorator的理解
2009/07/13 Python
Django框架中处理URLconf中特定的URL的方法
2015/07/20 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
中式结婚主持词
2014/03/14 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
移交协议书
2014/08/19 职场文书
迎新生标语大全
2014/10/06 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
《确定位置》教学反思
2016/02/18 职场文书