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