摘要: <div class="menu"> <ul> <li name="0">首页</li> <li name="1">php中文网</li> <li name="2">西门大
<div class="menu"> <ul> <li name="0">首页</li> <li name="1">php中文网</li> <li name="2">西门大官人</li> <li name="3">独孤九剑</li> <li name="4">灭绝师太</li> </ul> <div class="block"></div> </div>
*{margin:0;padding: 0;}
.menu{height: 32px;background: orange;width: 500px;margin:10px auto;border-radius: 6px;box-shadow: 0 0 8px #000;position: relative;}
li{width: 100px;height: 30px;line-height: 30px;text-align: center;color: #FFF;float: left;list-style: none;cursor: pointer;}
.block{width: 100px;height: 2px;background: #FFF;border-radius: 2px;position: absolute;left:0;top:30px;}$(function(){
$('li').hover(function(){
$x = parseInt($(this).attr('name'))*100;
$('.block').stop().animate({
left:$x+'px'
},300);
},function(){
$('.block').stop().animate({
left:'0px'
},300);
});
})
批改老师:查无此人批改时间:2018-11-14 11:40:54
老师总结:写的不错。如果在增加一个默认的就更好了,这样用户就会知道当前是哪个页面了。