下滑线跟随导航

枫2019-04-27 22:32:02

<!DOCTYPE html>

<html>

<head>

<title>下滑线跟随导航</title>

$(function(){

$('li').hover(

function(){

$x=parseInt($(this).attr('name'))*120

$('.block').stop().animate({left:$x+'px'},300)

function(){

$('.block').stop().animate({left:'0px'},300)

}

)

})

</script>

*{padding: 0;margin: 0}

ul{list-style: none;font-size: 15px;}

li{float: left;height: 30px;line-height: 30px;width: 120px;text-align: center;color: #fff;font-weight: bold; }

.menu{width: 720px;height: 32px;background: #AF3434;margin: 20px auto;border-radius: 3px;box-shadow: 0 2px 20px #000;position: relative;}

.block{width: 120px;height: 2px;background:#fff;position: absolute;top: 30px}

</style>

</head>

<body>

<ul>

<li name="2">DNF地下城</li>

<li name="4">Fate剑灵</li>

<li name="5">LOL银熊联盟</li>

</ul>

</div>

</body>

</html>

ZU]5810``_`5`FAS2B$%(64.png