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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
django中的HTML控件及参数传递方法
2018/03/20 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
如何用python整理附件
2018/05/13 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python用SSH连接到网络设备
2021/02/18 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
自我评价范文点评
2013/12/04 职场文书
媒体宣传策划方案
2014/05/25 职场文书
秋收起义观后感
2015/06/11 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
Python语言中的数据类型-序列
2022/02/24 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB