下划线跟随鼠标移动

原创 2018-12-07 12:26:14 7
摘要: <!DOCTYPE html> <html>  <head>   <title>下滑线跟随导航</title>   <meta charset="utf-8"/>   <script typ
 <!DOCTYPE html>
<html>
 <head>
  <title>下滑线跟随导航</title>
  <meta charset="utf-8"/>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css">
  	*{
  		padding:0;margin:0;
  	}
  	ul {
  		list-style: none;
  		z-index:20;
  		position:relative;
  		font-size: 15px;
  	}
  	li {
  		float:left;
  		cursor:pointer;
  		width:100px;height: 30px;
  		text-align:center;
  		line-height:30px;
  		color: #B3B3B3;
  		font-weight: bold;
  	}
  	.menu{
  		width:700px;height:32px;
  		position:relative;
  		margin:20px auto;
  		box-shadow: 0 2px 20px #B3B3B3;
  		background: black;
  		border-radius:3px 
  	}
  	//.active{
        //    border-bottom: 3px solid #4b4;
       // }
  </style>
  <script type="text/javascript">
     $(function(){
       $('li').hover(
         function(){
         $x=parseInt($(this).attr('name'))*100
          $('.block').stop().animate({left:$x+'px'},300)
         },
         function(){
           $('.block').stop().animate({left:'0px'},300)
         }   
         )
     })
     //$(function(){
     //       var lis=$("li");
     //      $.each(lis,function(i){
     //           $(lis[i]).mouseenter(function(e){
     //               $(".active").removeClass('active');
     //               $(this).addClass('active');
     //           });
     //       });
      //  });
  </script>
 </head>
 <body>
   <div class="menu">
   <ul>
     //<li class="active">首页</li>
     <li name="0">首页</li>
     <li name="1">视频教程</li>
     <li name="2">社区问答</li>
     <li name="3">编程词典人</li>
     <li name="4">手册下载</li>
     <li name="5">工具下载</li>
     <li name="6">菜鸟学堂</li>
   </ul>
  <div class="block" style="z-index:10;width:100px;height:2px;background:#00B33B;position:absolute;top:30px;display:none;"></div>
 </div>
 
 </body>
</html>

主要使用的是hover事件,以及animate方法与stop方法

animate用于执行动画;animate(内部定义动画的属性方法)

stop()用于清除动画效果;
$(ele).hover(function(){

// 鼠标移入时要执行的内容

}, function(){

// 鼠标移出时要执行的内容

})

批改老师:灭绝师太批改时间:2018-12-07 14:05:29
老师总结:完成的不错,条理清楚,知识点理解的较好!继续加油!

发布手记

热门词条