转行学开发，代码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. js获取指定字符后面的字符

    function getCaption(obj){ var index=obj.lastIndexOf("\-"); obj=obj.substring(index+1,obj.l ...

  2. Count Color poj2777 线段树

    Count Color poj2777 线段树 题意 有一个长木板,现在往上面在一定区间内刷颜色,后来刷的颜色会掩盖掉前面刷的颜色,问每次一定区间内可以看到多少种颜色. 解题思路 这里使用线段树,因为 ...

  3. java 线程池（线程的复用）

    一. 线程池简介 1. 线程池的概念: 线程池就是首先创建一些线程,它们的集合称为线程池.使用线程池可以很好地提高性能,线程池在系统启动时即创建大量空闲的线程,程序将一个任务传给线程池,线程池就会启动 ...

  4. P3452 [POI2007]BIU-Offices

    传送门 首先能想到 $n^2$ 的做法 枚举所有两点,看看是否有边相连,如果没有说明它们一定要在同一集合,用并查集维护一下就行 注意到如果没有边这个条件,其实就相当于问补图有边 所以题意可以转化为,求 ...

  5. 微信jssdk配置的问题，使用MVC制作的demo

    一,view代码 <script src="~/Scripts/jquery-3.3.1.js"></script> <script src=&quo ...

  6. Vue学习之旅：todomvc的学习练习

    一.前奏 1.todomvc官网地址:http://todomvc.com/ 查阅文档和下载插件都可以到这个官网上找. 2.上GitHub上搜索下载有人做的现成的本地模板:进入GitHub搜索todo ...

  7. document.body.scrollTop值为0的解决方法[转]

    做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,       window.onscroll=function () {          ...

  8. [转]使用flask实现mock server

    什么是mock server: http://www.testclass.net/interface/mock_server 使用flask 实现  mock server : http://www. ...

  9. linux NFS 服务器的安装

    1. 安装 nfs 服务 [root@allentuns ~]# yum -y install  nfs-utils rpcbind 2. 启动 nfs 服务 [root@allentuns ~]# ...

  10. popen, pclose - process I/O

    SYNOPSIS #include <stdio.h> FILE *popen(const char *command, const char *type); int pclose(FIL ...