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 相关文章推荐
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
微信小程序自定义联系人弹窗
May 26 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防注
2007/01/15 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
推荐dojo学习笔记
2007/03/24 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jquery选择器简述
2015/08/31 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
django-allauth入门学习和使用详解
2019/07/03 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python判断无向图环是否存在的示例
2019/11/22 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python 操作 MySQL数据库
2020/09/18 Python
python的dict判断key是否存在的方法
2020/12/09 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
Python的两道面试题
2013/06/29 面试题
公司会计岗位职责
2014/02/13 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python