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 ...
随机推荐
- ModelForm基本使用
介绍 Django提供Form和ModelForm两种表单验证方式.相比较Form,ModelForm可以直接与与数据库表相关联,不需要像Form那样需要手动逐一字段添加表单验证的字段.且可以随意选择 ...
- Leveldb源码分析--3
http://blog.csdn.net/sparkliang/article/details/8604416
- 贪心（change）
http://codeforces.com/gym/100989/problem/H After the data structures exam, students lined up in the ...
- 牛客练习赛51 C 勾股定理https://ac.nowcoder.com/acm/contest/1083/C
题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输入描述: 一个整数n. 输出描述: 另外两条边b,c.答案不唯一,只要输出任意一组即为合理, ...
- （六：NIO系列） 相关设计模式
出处: 反应器模式 vs 观察者模式 反应器模式 vs 生产者消费者模式 反应器模式 vs 观察者模式 反应器模式 是一种为处理服务请求并发提交到一个或者多个服务处理程序的事件设计模式.当请求抵达 ...
- 问题 B: 傻鸡抓大闸蟹
问题 B: 傻鸡抓大闸蟹 时间限制: 1 Sec 内存限制: 128 MB提交: 94 解决: 39[提交] [状态] [命题人:jsu_admin] 题目描述 背景又到了吃大闸蟹的季节,黄老师想 ...
- js—input框中输入数字，动态生成内容的方法
项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...
- JavaScript基础2——下拉列表左右选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台
基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台 1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含双片TI DSP TMS320C ...
- 自定义线程池的名称（ThreadPoolExecutor）
目的:有时候为了快速定位出现错误的位置,在采用线程池时我们需要自定义线程池的名称. 1.创建ThreadFactory(ThreadPoolExecutor默认采用的是DefaultThreadFac ...