day24—JavaScript实现导航栏底部引线跟随移动
转行学开发，代码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实现导航栏底部引线跟随移动的更多相关文章
- iOS开发--隐藏（去除）导航栏底部横线
iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分享来给小伙伴们. 1)声明UIImageV ...
- iOS navigationBar导航栏底部与self.view的分界线的隐藏
ios开发中经常碰到各种需求,比如要求导航栏的颜色和self.view的颜色一样,当我们直接设置navigationBar的颜色和view一样时,我们会发现navigationBar还会有一条分割线留 ...
- iOS之旅--隐藏（去除）导航栏底部横线
iOS之旅--隐藏(去除)导航栏底部横线 iOS开发大部分情况下会使用到导航栏,由于我司的app导航栏需要与下面紧挨着的窗口颜色一致,导航栏底部的横线就会影响这个美观,LZ使用了以下方法.觉得不错,分 ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- 【前端】javascript实现导航栏筋斗云效果特效
实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...
- 使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置，支持ES6/Less
之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...
- css实现导航栏下划线跟随效果
话不多说先附上代码 <style> ul li { float: left; display: block; list-style: none; margin-left: 20px; bo ...
- 导航栏底部黑线隐藏 UINavigationBar hidden Bottom Line
3种方法: 1.大杀器 ,iOS 10.2 最新系统亲测无问题( 添加导航栏分类) https://github.com/samwize/UINavigationBar-Addition/ 2.io ...
随机推荐
- python基础-9.2 单例模式
设计模式 一.单例模式 单例,顾名思义单个实例.创建一个实例 链接池案例 1.单例=>只有一个实例 2.静态方法+静态字段 3.所有的实例中封装的内容相同时用单例模式 class Connect ...
- hdu-1281.棋盘游戏(二分图匹配 + 二分图关键点查询)
棋盘游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- VS2015+QT环境配置后，Lauch Qt Designer打开失败，无法打开*.ui文件
最近在VS2015上配置QT时出现了这个问题,遂百度其解决方法,解决之后记录下来.第一步: 在[解决方案资源管理器]中,右击你的 xxx.ui文件,选择[打开方式],此时列表中默认值是[ Qt des ...
- Water Tree CodeForces 343D 树链剖分+线段树
Water Tree CodeForces 343D 树链剖分+线段树 题意 给定一棵n个n-1条边的树,起初所有节点权值为0. 然后m个操作, 1 x:把x为根的子树的点的权值修改为1: 2 x:把 ...
- Java JDK在Mac下的配置方法
Java JDK在Mac.Windows下的配置方法 Mac 第一步:下载JDK 官网下载地址 第二步:安装JDK 安装步骤很简单,一直点击下一步即可. 第三步:配置环境变量 打开terminal(终 ...
- PyCharm使用技巧总结
PyCharm高频使用快捷键 快速修复:ALT + ENTER 搜索: 双击Shif 垂直分隔窗口: ALT + V 另起一行: SHIFT + ENTER 删除当前插入符所在的行: Ctrl + Y ...
- [转]Tomcat9.0安装教程 Tomcat9.0环境变量配置教程
[转]Tomcat9.0安装教程 Tomcat9.0环境变量配置教程 [转]超详细MySQL安装及基本使用教程
- [SDOI2015]寻宝游戏（LCA，set）
[SDOI2015]寻宝游戏 题目描述 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到 ...
- 进程间的mutex
设两个进程共用一个临界资源的互斥信号量mutex=1,当mutex＝-1时表示(). 一个进程进入了临界区,另一个进程等待 没有一个进程进入临界区 两个进程都进入临界区 两个进程都在等待 互斥信号量不 ...
- CSS3选择器 ::before和::after
:before和:after伪元素的用法 :before和:after伪元素的用法十分简单:下面的代码样例中, :before 和 :after 将会在 blockquote 元素之前和之后插入新内容 ...