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 ...
随机推荐
- Node.js实战10：“流”是Node.js最强大的功能之一。
流是Nodejs的高级应用,掌握流的使用,才能真正胜任NodeJS开发. Nodejs中,流是基于事件的API,用于管理和处理数据,而且效率很好! 什么是流? 流是一个抽象接口,Node 中有很多对象 ...
- HDU.6186.CSCource.(前缀和数组和后缀和数组)
明天后天是南昌赛了嘤嘤嘤,这几天就先不更新每日题目了,以后补题嘤嘤嘤. 今天和队友做了一套2017年广西邀请赛,5个题还是有点膨胀...... 好了,先来说一下有意思的题目吧...... CS Cou ...
- SCUT - 142 - 第n个素数
https://scut.online/p/142 但是洲阁筛打表还是超时了,打的表不够长吧,在51nod上面要跑5s.要是快10倍得要密1000倍,根本打不出来(时间意义). 暴力check要找的质 ...
- Log4Net 之将日志记录到数据库的配置 （一）
原文:Log4Net 之将日志记录到数据库的配置 (一) 前段时间我一直想做一个通用一点的日志记录系统,可以便于不同的业务组调用进行日志记录及分析.本来打算着自己下手写一个,后面发现各业务组可能会需要 ...
- BUUCTF--rsa
测试文件:https://buuoj.cn/files/ed10ec009d5aab0050022aee131a7293/41c4e672-98c5-43e5-adf4-49d75db307e4.zi ...
- 浅谈使用canvas绘制多边形
本文主要使用坐标轴的使用来绘制多边形,点位则都是在y轴上寻找,这种方法能够更好的理解图形与修改. //id为html里canvas标签的属性id: //x,y为坐标轴的起始位置,因为canvas默认坐 ...
- Python之路-Python中文件和异常
一.文件的操作 open函数 在python中,使用open函数,打开一个已经存在的文件,或者新建一个新文件. 函数语法 open(name[, mode[, buffering[,encoding] ...
- sqlserver sp_who2和inputbuffer的使用，连接数
一.sp_who2的使用 1.存储过程的位置 sp_who官方解释地址:https://docs.microsoft.com/zh-cn/sql/relational-databases/system ...
- Tensorflow学习笔记3：卷积神经网络实现手写字符识别
# -*- coding:utf-8 -*- import tensorflow as tf from tensorflow.examples.tutorials.mnist import input ...
- 如何从mysql备份中提取单张表数据
1.先提取备份数据中的前50行出来,查看一下备份数据格式 head -50 bakdb.sql > head50.txt 类似下面的数据是我们所需要提取的: / ...