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 相关文章推荐
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
jsPDF导出pdf示例
May 02 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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的输出:缓存并压缩动态页面
2013/06/11 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
canvas的神奇用法
2017/02/03 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
JS实现图片切换效果
2018/11/17 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
对python的输出和输出格式详解
2018/12/08 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
艺术应用与设计个人的自我评价
2013/11/23 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
同学毕业留言寄语
2015/02/27 职场文书
教师节老师寄语
2015/05/28 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫