鼠标跟随导航

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>鼠标跟随菜单</title>
	<style>
		*{margin: 0;padding:0; }
		ul{list-style: none;}
		a{text-decoration: none;}
		.nav{width: 100%;height: 60px;background-color: #303030;}
		.nav_wrap{width: 1000px;margin: 100px auto;position: relative;}
		.nav li{float: left;line-height: 60px;}
		.nav li a{color: #fff;padding: 0 30px;display: block;}
		.nav .active a{color: red;}
		.nav li a:hover{color: red;}
		.nav .line{height: 4px;background-color: red;position: absolute;top: 60px;left: 0;}
	</style>
</head>
<body>
<div class="nav">
	<div class="nav_wrap">
		<ul>
			 <li class="active"><a href="#">首页</a></li>
			 <li><a href="#">名言</a></li>
			 <li><a href="#">文章</a></li>
			 <li><a href="#">故事</a></li>
			 <li><a href="#">名人名言</a></li>
		</ul>
		<div class="line"></div>
	</div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){

	$(".nav").find(".line").width($(".nav li").eq(0).width());  //设置线条的宽度
	$(".nav li").hover(function(){
		var _left=$(this).position().left;  //鼠标移入时,获取li的left值
		$(".nav").find(".line").width($(this).width()).stop().animate({"left":_left},200);
	},function(){
		var _left=$(".nav li.active").position().left;  //鼠标移出时,获取li.active的left值
		$(".nav").find(".line").width($(".nav li.active").width()).stop().animate({"left":_left},200);
	})
	$(".nav li").click(function(){
		var _left=$(this).position().left;
		$(this).addClass("active").siblings().removeClass("active");
		$(".nav").find(".line").width($(this).width()).stop().animate({"left":_left},200);
	})
})
</script>
</body>
</html>

  

时间: 2024-10-06 04:09:39

鼠标跟随导航的相关文章

左边跟鼠标滑动导航

<!doctype html><html><head><meta charset="utf-8"><title>左边跟随鼠标滑动导航仿淘宝UED - 懒人建站</title><meta name="keywords" content="滑动导航" /><meta name="description" content="左边跟随鼠

javascript-事件冒泡、鼠标跟随、键盘跟随、键盘提交

1.事件冒泡 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css" media="screen">         #d1 {width: 200px;he

鼠标跟随提示框

<!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> <title>鼠标跟随提示框</title>

css实现鼠标经过导航文字偏位效果

<!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-Typ

css实现鼠标经过导航颜色变换效果

css实现鼠标经过导航颜色变换效果,如下图: 1.先准备两张图片分别为:nav.jpg.hover.jpg,放到images文件夹里面. 2.准备一个index.html文档,该文档跟images评级,如下图: index.html的html代码 <div class="nv"> <ul> <li><a href="#">首页</a></li> <li><a href=&quo

鼠标跟随效果(杀马特风格)(非主流勿黑我)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>萤火虫阵列</title> 7 <meta name="description&

javascript 鼠标跟随特效代码及理解

javascript 鼠标跟随特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px; back

支持鼠标跟随的JS+CSS链接提示框

觉得纯css的tips限制有点大,而且好像兼容性也不好,这是我发现的一个Js+CSS的链接提示框效果,还会跟随鼠标而移动,而且兼容性也不错,代码与大家分享:前端分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

AS2.0鼠标跟随和拖动代码

1,鼠标跟随. a: Mouse.hide();//隐藏鼠标,Mouse.show()显示鼠标. MC1.startDrag(true);//直接利用函数实现. b: Mouse.hide(); onEnterFrame=function(){//坐标赋值实现 MC1._x=_xmouse;//鼠标坐标赋值给MC1. MC1._y=_ymouse; } 2,垂直拖动. //垂直拖动在Y(249,260)输出YES. bar.onPress=function() { startDrag(bar,t