转行学开发，代码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. SocketChannel 读取ByteBuf 的过程

    SocketChannel 读取ByteBuf 的过程: 我们首先看NioEventLoop 的processSelectedKey 方法: private void processSelectedK ...

  2. 设置国内AndriodSDK代理

    由于一些原因,Google相关很多服务都无法访问,所以在很多时候我们SDK也无法升级,当然通过技术手段肯定可以解决,但是比较麻烦,而且下载速度也不怎么样. 这里笔者介绍一个国内的Android镜像站, ...

  3. 26、前端知识点--利用webpack搭建脚手架一套完整流程

    前言 我们的目标是利用webpack搭建一个基于react + react-router +dva + es6 + less + antd用于中后台开发的脚手架,同学们可能会说社区里那么多优秀的脚手架 ...

  4. BCR-ABL融合基因及检测

    费城染色体 费城染色体(Philadelphia chromosome, Ph (or Ph') chromosome),或称费城染色体易位(Philadelphia translocation),是 ...

  5. Vue slot-scope的理解（适合初学者）

    百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的. 先抛例程: <!DOC ...

  6. Floyd(弗洛伊德)算法(C语言)

    转载:https://blog.csdn.net/qq_35644234/article/details/60875818 Floyd算法的介绍 算法的特点 弗洛伊德算法是解决任意两点间的最短路径的一 ...

  7. Vue+elementui 实现复杂表头和动态增加列的二维表格

    先上完成的效果图:列是根据查询结果增加的 数据格式: 表头的数据取出: data.data.forEach(element => { this.thead.push({ 品名: element. ...

  8. IO流详解及测试代码

    IO流 (1)IO用于在设备间进行数据传输的操作 (2)分类:    A:流向       输入流 读取数据      输出流 写出数据   B:数据类型     字节流         字节输入流  ...

  9. RabbitMQ相关使用命令

    启动:rabbitmq-server -detached 停止:rabbitmqctl stop 状态:rabbitmqctl status 查看所有用户rabbitmqctl list_users ...

  10. linux 验证 NFS 是否成功

    服务器端----->>客户端 1. 服务器端 [root@allentuns ~]# ifconfig |grep "Bcast" inet addr:192.168. ...