网站导航标题栏下面有一小色块跟随鼠标移动，同时色块颜色改变的特效

最新推荐文章于 2024-01-18 01:01:46 发布

BigLazyET

最新推荐文章于 2024-01-18 01:01:46 发布

阅读量5.3k

点赞数 1

文章标签： js jquery 网站导航标题栏下面有一小色块跟随鼠标移动网站导航栏特效

本文链接：https://blog.csdn.net/u010792238/article/details/25297273

版权

网页前台特效专栏收录该内容

6 篇文章 0 订阅

订阅专栏

可能很多人看标题不是很明白这个特效，下面简述一下这个特效：

看到很多网站上的导航栏下面有一个小的色块，一开始小色块是处在第一个标题下面的，当鼠标移动到另一个标题时，这个小色块就会悠悠地跑到对应的标题下面。

也可以鼠标放上去不光是色块移动，颜色也相应的改变：

这里截图只能看到色块是移动了，但显示不出色块是从Home下面平滑移动到Product下面的。反正就是这个意思了。大家看我上面的解释就知道了，不行看下面代码或者把代码拷贝运行一下就看到效果了

这个特效很好玩，正好朋友写了这方面的特效代码，我拿过来看了下，这才发现其实很简单，就是几个jquery封装好的方法拼接一下就ok了，但自己写还是很犯难，其实主要还是想法和思路的问题。

下面贴出代码：

注意：

1.用到了jquery库，大家如果有兴趣复制粘贴过去自己调试一下，请自行导入对应的jquery库即可

2.用了parent()函数

3.用了position()函数

4.用了stop()函数

(这个stop函数可以重载。可以是一个参数，表示无条件的停止当前的一切动画。一个是两个参数，表示是否让当前动画执行完成后再停止动画)

5.用了animate()函数

(这个animate很常用，建议大家去w3cshool上看一下)

6.鼠标放上去和移开的mouseenter和mouseleave函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动导航</title>
<style>
body,html,div{margin:0;padding:0;font-weight:bold;font-family:Verdana, Geneva, sans-serif; font-style:italic;}
.menu{
	margin:0 auto;
	width: 900px;
	position: relative;
	background-color:#000;
	border:0px solid #000;
}
.menu ul{ border:0px solid #F00; height:60px; padding:0;}
.menu li{
	float: left;
	width:80px;
	list-style: none;
	padding: 0 20px;
	text-align: center;
	height: 60px;
	line-height: 60px;;
	border:0px solid #FFF;}
.menu li a{text-decoration:none; color:#CCC;}
.menu a:hover,.menu li:hover a{
	color: #0CF;
}
.back{
	height: 3px;
	background-color: #0CF;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 120px;
}
</style>
<script src="Js/jquery1.9.1.js" language="javascript" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
    $(".menu ul li a").mouseenter(function(){
		var parent=$(this).parent();
		left=parent.position().left;
		$(".back").stop(true,true).animate({left:left,width:"120px"}, "fast");
	})
	$(".menu ul").mouseleave(function(){
		$(".back").stop(true,true).animate({left:"0px",width:"120px"},"fast");
		})
});
</script>
</head>

<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Picture</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="back"></div>
</div>


</body>
</html>

如果需要鼠标放上去色块的颜色也改变，则只要把<script>里面的内容改成如下即可：

<script>
$(document).ready(function(e) {
    $(".menu ul li a").mouseenter(function(){
		var parent=$(this).parent();
		left=parent.position().left;
		$(".back").stop(true,true).animate({left:left,width:"120px"}, "fast");
		$(".back").css("background-color","#F00");//鼠标放上去色块颜色改变
	})
	$(".menu ul").mouseleave(function(){
		$(".back").stop(true,true).animate({left:"0px",width:"120px"},"fast");
		$(".back").css("background-color","#0CF");//鼠标移开色块颜色恢复初始值
		})
});
</script>

BigLazyET

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
网站导航标题栏下面有一小色块跟随鼠标移动，同时色块颜色改变的特效

可能很多人看标题不是很明白这个特效，下面简述一下这个特效：看到很多网站上的导航栏下面有一个小的色块，一开始小色块是处在第一个标题下面的，当鼠标移动到另一个标题时，这个小色块就会悠悠地跑到对应的标题下面。这里截图只能看到色块是移动了，但现实不出色块是从Home下面平滑移动到Product下面的。反正就是这个意思了。大家看我上面的解释就知道了，不行看下面代码或者把代码拷贝运行一
复制链接

扫一扫