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 ...
随机推荐
- css：设置div边框透明+渐变
写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+ ...
- Super Mario HDU 4417 主席树区间查询
Super Mario HDU 4417 主席树区间查询 题意 给你n个数(编号从0开始),然后查询区间内小于k的数的个数. 解题思路 这个可以使用主席树来处理,因为这个很类似查询区间内的第k小的问题 ...
- HDU-1269 迷宫城堡(连通分量)
迷宫城堡 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- C# Xml.Serialization 节点重命名
XmlElement 节点重命名 XmlRoot 根节点重名称 XmlArray List集合添加根节点 XmlArrayItem List集合中子节点重命名 [Serializable] 将该类标记 ...
- AngularJS语法
1,$scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. $scope是一个对象,有可用的方法和属性. $scope可应用在视图和控制器上.2,所有的 ...
- 异常处理 VEH
不算新的东西,也都不小了, VEH的结构处理,平行于SEH,但是略有区别, 相关函数有四个 PVOID WINAPI AddVectoredExceptionHandler( _In_ ULONG F ...
- 【推荐系统】知乎live入门3.召回
参考链接 [推荐系统]知乎live入门 目录 1. 概述 2. 画像过滤 3. 协同过滤 4. 内容过滤 5. 模型过滤 6. 其他过滤 7. 总结 ========================= ...
- ES常见错误
1. Request cannot be executed; I/O reactor status: STOPPED RestClient被关闭了 2. SpringBoot启动后 Stopping ...
- 比较两个Sql数据库是否相同
1.打开VS20122.SQL→架构比较→新建架构比较3.在源和目标上分别填上两个待比较的数据库的信息4.点击比较,不一会儿,系统就会列出两个数据库的差异了.
- C6678芯片
TMS320C6678是一款八核C66x的定点/浮点DSP,支持高性能信号处理应用.TMS320C6678芯片是美国德州仪器公司生产的处理器.它支持高性能信号处理应用,支持DMA传输,可应用于高端图像 ...