转行学开发，代码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. （4.23）SQL Server中的加密

    转自:https://www.cnblogs.com/CareySon/archive/2012/04/01/SQL-SERVER-Encryption.html 简介 加密是指通过使用密钥或密码对数 ...

  2. [Codeforces 1191D] Tokitsukaze, CSL and Stone Game(博弈论)

    [Codeforces 1191D] Tokitsukaze, CSL and Stone Game(博弈论) 题面 有n堆石子,两个人轮流取石子,一次只能从某堆里取一颗.如果某个人取的时候已经没有石 ...

  3. HDU 5945 题解(DP)(单调队列)

    题面: Fxx and game Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) T ...

  4. css中的居中的方法

    一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...

  5. SCAU 2015 GDCPC team_training1

    A: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1525 题意:前两段都是废话 , 然后给出一个 p( p(a) ) = p(a) 的公式给你 ...

  6. vue路由守卫配合权限，白名单

    router.beforeEach(async(to, from, next) => { // 进度条开始 NProgress.start() // 确认用户是否已登录(获取它的token值,这 ...

  7. 遍历并读取指定目录下的所有文件内容，写入Map集合然后输出在控制台和本地文件

    public class FileWrite { public static void main(String[] args) throws Exception { //封装数据源目录 File sr ...

  8. 如何在Set集合中避免重复元素

    文章翻译自 Avoiding near-duplicates in sets, 作者Paul Hudson @twostraws是一名优秀的Swifter. 这是我第一次翻译,可能有翻译不到位的地方, ...

  9. 基于 VirtualApp 结合 whale hook框架实现hook第三方应用

    要点 1. whale hook framework 使用示例: 2. 参考项目:VirtualHook: 3. 按照 VirtualHook 修改 VirtualApp: 4. 编写 hook pl ...

  10. select 项目<选课系统>

    """1. 创建北京.上海 2 所学校 学校类对象 属性:名字,地址 行为: 2. 创建linux , python , go 3个课程 , linux\py 在北京开, ...