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 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
javascript测试题练习代码
Oct 10 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
JavaScript的function函数详细介绍
Nov 20 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中的静态变量及static静态变量使用详解
2015/11/05 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python 闭包的使用方法
2017/09/07 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
python 字典的打印实现
2019/09/26 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python中如何引入第三方模块
2020/05/27 Python
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
军训教官感言
2014/03/02 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
辞职信怎么写?
2019/05/21 职场文书