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控制div及网页相关属性的代码
Dec 19 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
浅谈node中的cluster集群
Jun 02 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 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抓即时股票信息
2006/10/09 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
js 调整select 位置的函数
2008/02/21 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
法国在线药房:1001Pharmacies
2021/03/07 全球购物
预备党员思想汇报
2014/01/08 职场文书
商铺租赁意向书
2014/04/01 职场文书
本科生求职信
2014/06/17 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
检讨书范文500字
2015/01/28 职场文书
行政经理岗位职责
2015/04/15 职场文书
工作时间证明
2015/06/15 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL