转行学开发，代码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. pytony格式化输出-占位符

    1. %s s = string 字符串 2. %d d = digit 整数 3. %f f = float 浮点数 #!/usr/bin/env python #_*_coding:utf-8_* ...

  2. Vue—非父子组件间的传值（Bus/发布订阅模式/观察者模式/总线）

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

  3. [Python3 练习] 009 利用列表隐藏并找到有用的信息

    题目:利用列表隐藏并找到有用的信息 (1) 描述 1) 题源 鱼 C 论坛中"小甲鱼"老师出的题 链接地址:第020讲:函数:内嵌函数和闭包 | 课后测试题及答案 2) 修改 题中 ...

  4. 洛谷 P1108 低价购买（LIS，统计方案数）

    传送门 解题思路 看第一个要求,很显然是求最长下降子序列,和LIS几乎一样,很简单,再看第二个问号,求最长下降子序列的方案数??这怎么求? 注意:当二种方案“看起来一样”时(就是说它们构成的价格队列一 ...

  5. Fiddler用法整理

    目 录 1 Fiddler的基本介绍 1.1 下载安装 1.2 适用平台 2 Fiddler的工作原理 3 同类工具 4 捕获非IE浏览器的会话 5 捕获不同请求的设置方法 5.1 Web HTTPS ...

  6. python 模块调用的几种方式

    在python里面又很多模块,或者引用第三方模块,python 模块调用的几种方式,下面详细解说 1,import 模块名 2,from 模块 import  模块里面的小功能 3,from  模块 ...

  7. 最全的 Java 知识总结- Github 日增 10 star

    项目地址: 如果觉得有帮助,希望大家给个 star 鼓励以下:同时也希望大家多多 fork,一起加入进来. 为什么选择做这个开源项目 首先,希望提高自己:因为选择做这个,自己肯定就会花时间去提高自己的 ...

  8. sys模块与shutil模块

    #coding=utf-8 import sys ## sys.argv #从命令行获取参数 import shutil #文件.文件夹.压缩包.处理模块 f1 = open("test.t ...

  9. win32 socket 编程（一）——TCP/IP

    一.基本概念 a) 同步:指发送方发出数据后,等收到接收方发回的响应,才发下一个数据包的通信方式. nb)异步:指的是发送方不等接收方响应,便接着发下个数据包的通信方式. c) 阻塞:指调用某函数时, ...

  10. hash和history

    location.hash="aaa" history.pushState({},'', "home") history.replaceState() hist ...