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 ...
随机推荐
- Java实验报告（一）&&第三周学习总结
实验报告(一) 1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 源代码: public class Main { p ...
- c++ const 修饰变量位置含义
c++ const 修饰变量位置含义 const 修饰成员变量 const修饰指针变量时: 只有一个const,如果const位于*左侧,表示指针所指数据是常量,也就是指向常量的指针,不能通过解引用修 ...
- Oracle 常用统计视图汇总
Oracle统计信息对数据库性能优化和故障排除都相当重要,目前接触到的与统计信息相关的视图大体有 4 个: 1.v$sysstat 视图 该视图用于记录系统级的统计信息,共 5 ...
- PCIe基础篇（一）、基础知识扫盲
1.PCIe:Peripheral Component interconnect Expess,外围组件接口互联,属于第三代IO总线,PCIe的传输速率指的是实际的有效传输速率,为RAW data(原 ...
- Winfrom中数据的双向绑定(使用INotifyPropertyChanged)
在WPF中新建项目是自动实现了INotifyPropertyChanged接口,用于数据绑定时非常的方便在winfrom中也可以实现INotifyPropertyChanged接口 将需要绑定的字段写 ...
- 原生jdbc操作
1:加入dbcp连接池依赖 <dependency> <groupId>org.apache.commons</groupId> <artifactId> ...
- thinkphp不读取.env文件的键对值
第一:$_ENV会为空,其原因通常是php的配置文件php.ini的配置项为: :variables_order :Default Value: “EGPCS” :Development Value: ...
- 在Node.js环境下使用Express创建Web项目实例
序:如果你还不知道Node.js是什么,那么你可以先看看这篇:Node.js 究竟是什么?或者任何关于它的介绍. 一.安装Node.js 1.进入Node.js官网下载并安装 2.启动cmd输入命令查 ...
- JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 美国知名Cloudflare网络公司遭中国顶尖黑客攻击
最近中美贸易战愈演愈烈,美国知名Cloudflare网络公司的客户的分布式拒绝服务攻击今天在恶意流量方面达到了新的高度,黑客并袭击了该公司在欧洲和美国的数据中心.根据Cloudflare首席执行官马修 ...