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折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
JS轮播图的实现方法2
Aug 25 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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
数据库笔试题
2013/05/09 面试题
党的群众路线教育实践方案
2014/05/11 职场文书
淘宝店策划方案
2014/06/07 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Python Django模型详解
2021/10/05 Python
pandas中关于apply+lambda的应用
2022/02/28 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫