一直学弄后台的一点东西,却毫无思绪。状态不佳,就把之前写过的小下滑线分享下,大家应该都会写,只是思路可能不一样

ding
ding 发布于 2016-12-30 23:21:59 浏览:1106 类型:原创 - 随笔 分类:JavaScript - 看仿 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js</title>
</head>
<style>
*{margin: 0;padding: 0;}
.nav-box{
	position: relative;
}
	ul{
		overflow: hidden;
		list-style: none;
		height: 40px;
		line-height: 40px;
		background-color: #000;
	}
	ul li{
		float: left;
		padding: 0 15px;
	}
	ul li a{
		display: block;
		font-size: 18px;
		color: #fff;
		text-decoration: none;
	}
	ul li a:hover{
		color: #ff00ff;
	}
	.line{
		position: absolute;
		bottom:0;
		left: 0;
		display: block;
		height: 3px;
		width: 0px;
		background-color: red;
	}
</style>
<body>
	<div class="nav-box">
		<ul class="nav">
			<li><a href="">1</a></li>
			<li><a href="">22</a></li>
			<li><a href="">333</a></li>
			<li><a href="">4444</a></li>
			<li><a href="">55555</a></li>
			<li><a href="">666666666666</a></li>
                       <li><a href="">7777777777777777</a></li>
		</ul>
		<span class="line"></span>
	</div>
<script src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
	<script>
	$(function(){
		$(".nav-box .nav li").hover(function(){
			var _w=$(this).innerWidth();
			var off=$(this).offset(); 
			var _left=off.left;
			$(".nav-box .line").stop(true).animate({left:_left,width:_w},300)
		},function(){
			$(".nav-box .line").animate({left:"0",width:"0"},600)
		})
	})
	</script>
</body>
</html>
标签:
z
给个赞 5 人点赞
收藏 15 人收藏
评论 已有 8 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
ding
ding2017-01-12 17:18:478F
这样是hover上去出现下边线,没有滑动效果;而且这样你直接border-bottom就可以,直接隐藏,hover时出现,不用jq就可以了,你说的是这个意思吗 //@探花:为什么不直接用伪元素呢?直接写好样式,然后在addClass,不就好了
举报 支持 (0) 回复 (0)
探花
探花2017-01-03 16:35:307F
为什么不直接用伪元素呢?直接写好样式,然后在addClass,不就好了
举报 支持 (0) 回复 (1)
天凉好个秋
天凉好个秋2016-12-31 16:10:296F
emoticon //@台灯油条:前面有一个hover,所以有两个匿名函数作为参数
stop用来停止当前的动画
第一个animate是令红线运动到下一个li
下一个animate是令红线往左移动直至消失emoticon //@天凉好个秋:这两段的机制是什么啊?展开代码
	$(".nav-box .line").stop(true).animate({left:_left,width:_w},300)
		},function(){
			$(".nav-box .line").animate({left:"0",width:"0"},600)
举报 支持 (0) 回复 (0)
天凉好个秋
天凉好个秋2016-12-31 14:24:535F
用坐标么,我想想获取元素坐标的方法是啥来着。 //@ding:只需要获取ul到窗口左边的距离,将它给line,设置为初始值就可以了 //@天凉好个秋:那个,如果导航条是居中的,.line的坐标宽度怎么判断啊?
举报 支持 (0) 回复 (0)
ding
ding2016-12-31 13:49:414F
只需要获取ul到窗口左边的距离,将它给line,设置为初始值就可以了 //@天凉好个秋:那个,如果导航条是居中的,.line的坐标宽度怎么判断啊?
举报 支持 (0) 回复 (1)
天凉好个秋
天凉好个秋2016-12-31 11:29:133F
那个,如果导航条是居中的,.line的坐标宽度怎么判断啊?
举报 支持 (0) 回复 (1)
台灯油条
台灯油条2016-12-31 11:17:592F
前面有一个hover,所以有两个匿名函数作为参数
stop用来停止当前的动画
第一个animate是令红线运动到下一个li
下一个animate是令红线往左移动直至消失emoticon //@天凉好个秋:这两段的机制是什么啊?展开代码
	$(".nav-box .line").stop(true).animate({left:_left,width:_w},300)
		},function(){
			$(".nav-box .line").animate({left:"0",width:"0"},600)
举报 支持 (0) 回复 (1)
天凉好个秋
天凉好个秋2016-12-31 08:40:121F
这两段的机制是什么啊?展开代码
	$(".nav-box .line").stop(true).animate({left:_left,width:_w},300)
		},function(){
			$(".nav-box .line").animate({left:"0",width:"0"},600)
举报 支持 (0) 回复 (1)
ding ding 作者

心所向,行所致

作者最新