您当前的位置:首页 > 网站建设笔记 >

背景色跟随鼠标移动高亮当前鼠标指向的链接特效

0

点击预览效果,基于JQuery要实现这种导航菜单效果(背景色块跟随鼠标移动,高亮当前鼠标指向的链接,鼠标离开导航菜单后,背景色块移回当前导航链接)很简单,以下贴出代码,有需要的直接复制粘贴。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>背景色跟随鼠标移动高亮当前鼠标指向的链接特效-网站程序网</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var $t, leftX, newWidth;
	$('.menu ul').append('<div class="block"></div>');
	var $block = $('.block');
	$block.width($(".current").width()).css('left', $('.current a').position().left).data('rightLeft', $block.position().left).data('rightWidth', $block.width());
	$('.menu ul li').find('a').hover(function() {
		$t = $(this);
		leftX = $t.position().left;
		newWidth = $t.parent().width();
		$block.stop().animate({
			left: leftX,
			width: newWidth
		},300);
	}, function() {
		$block.stop().animate({
			left: $block.data('rightLeft'),
			width: $block.data('rightWidth')
		},300)
	})
})
</script>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;list-style:none;outline:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}

nav{width:100%;height:40px;background:#333;box-shadow:0 0 2px}
nav ul{position:relative;width:960px;height:40px;margin:0 auto}
nav ul li{float:left}
nav ul li a{position:relative;z-index:2;display:block;padding:0 10px;line-height:40px;color:#fff;text-decoration:none;font-size:0.875em}
nav .block{position:absolute;z-index:0;left:0;bottom:0;width:48px;height:40px;background:red}
</style>
</head>
<body>
<nav class="menu">
	<ul>
		<li class="current"><a href="">网站首页</a></li>
		<li><a href="">网站模板</a></li>
		<li><a href="">phpcms常见问题</a></li>
		<li><a href="">dedecms常见问题</a></li>
		<li><a href="">网站建设常见问题</a></li>
		<li><a href="">CSS3</a></li>
	</ul>
</nav>
</body>
</html>

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部