转行学开发，代码100天——2018-04-09

前面的学习笔记中记录过，利用：before和：after实现导航栏鼠标移动跟随效果，今天通过JavaScript代码实现同样的效果，以作对比。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript实现导航栏底部引线跟随移动</title>

<!--适应移动端-->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--css样式-->

<style>

    body{background-color: #EBEBEB}

    ul{

        list-style:none;

        position:relative;

        overflow:hidden;

    }

    ul li{

        float:left;

        padding:5px 10px;

        background:skyblue;

        color:#fff;

        line-height:45px;

        text-align:center;

        transition:all .2s linear;

        cursor:pointer;

    }

    ul span{

        width:100%;

        height:2px;

        bottom:0;

        background:#f60;

        position:absolute;

        display:black;

    }

    li:hover{

        color:#000;

    }

</style>

<!--引用jquery库-->

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

<h3>这是一个导航栏下引线鼠标跟随移动效果</h3>

<div id="aaa">

    <ul>

        <li>菜单1</li>

        <li>菜单2</li>

        <li>菜单3</li>

        <li>菜单4</li>

        <li>菜单5</li>

        <span class="line"></span>

    </ul>

</div>

<script type="text/javascript">

    $(document).ready(function(){

         $("ul span").css({

             'left':$("ul li").eq(0).position().left,

             'wodth':$("ul li").eq(0).outerWidth()

         });

         $("ul li").hover(function(){

             $("ul span").stop().animate({

                 left:$(this).position().left,

                 width:$(this).outerWidth()

             });

         },function(){

             $("ul span").stop().animate({

                 left:$("ul li").eq(0).position().left,

                 width:$("ul li").eq(0).outerWidth()

             })

         });

    });

</script>

</body>

</html>

注：在本例中利用了outerWidth()方法获取元素的外部宽度。注意其与width，innerWidth()的区别。

day24—JavaScript实现导航栏底部引线跟随移动的更多相关文章

  1. iOS开发--隐藏（去除）导航栏底部横线

    iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分享来给小伙伴们. 1)声明UIImageV ...

  2. iOS navigationBar导航栏底部与self.view的分界线的隐藏

    ios开发中经常碰到各种需求,比如要求导航栏的颜色和self.view的颜色一样,当我们直接设置navigationBar的颜色和view一样时,我们会发现navigationBar还会有一条分割线留 ...

  3. iOS之旅--隐藏（去除）导航栏底部横线

    iOS之旅--隐藏(去除)导航栏底部横线 iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分 ...

  4. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  5. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

  6. 【前端】javascript实现导航栏筋斗云效果特效

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

  7. 使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置，支持ES6/Less

    之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...

  8. css实现导航栏下划线跟随效果

    话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...

  9. 导航栏底部黑线隐藏 UINavigationBar hidden Bottom Line

    3种方法: 1.大杀器  ,iOS 10.2 最新系统亲测无问题( 添加导航栏分类) https://github.com/samwize/UINavigationBar-Addition/ 2.io ...

随机推荐

  1. Redis数据类型：Hashes、Geo操作指令

    Redis数据类型:Hashes.Geo操作指令 Hashes常用操作指令 Redis Hashes是一个键值对的映射表,最对能存储2^32-1(约40亿)个键值对. HSET HGET HSET:将 ...

  2. POJ-2352.Stats(树状数组简单应用)

    Stars Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 58255   Accepted: 24860 Descripti ...

  3. 在SSIS 的 64 位版本中不支持 Excel 连接管理器[转]

    Microsoft sql server 2008 R2——> SQL SERVER Business Intelligence Development Studio 使用EXCEL数据源或目标 ...

  4. python里的排序

    本篇文章主要讲: 自定义规则排序 多字段排序 开讲之前,先讲一些简单sorted()或者sort(),两者返回值不同!大家自行学习,不是本文的重点! sorted([5, 2, 3, 1, 4]) # ...

  5. js中的函数声明置顶

    函数声明置顶是指 js引擎在读取变量与声明式函数时,会优先读取,例如如下 var a = 1: function a(){}; console.log(a); //这里得到的为1,而不是该functi ...

  6. windows下使用命令行获取管理员权限

    在win下运行npm install安装依赖出现错误: Error: EBUSY, resource busy or locked 搜索错误信息后发现是由于没有管理员权限,在bash中输入以下命令后运 ...

  7. uwsgi配置cheaper模式进行自动弹性

    [uwsgi] socket = 0.0.0.0:8080 protocol = http master = true hara-kiri = 60 chdir = /home/test/projec ...

  8. 1142. Maximal Clique (25)

    A clique is a subset of vertices of an undirected graph such that every two distinct vertices in the ...

  9. HTML5 中list 和datalist实例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. SpringMVC的@ResponseBody注解简介

    SpringMVC简介 SpringMVC也叫Spring Web MVC 属于展示层框架.是Spring框架的一部分. 核心组件类DispatherServlet springMVC是围绕Dispa ...