导航栏跟随效果

原创 2018-12-29 14:18:55 378
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>导航栏跟随效果</title> <script type="text/javascript" src="jq.js"></script

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>导航栏跟随效果</title>

<script type="text/javascript" src="jq.js"></script>

<style type="text/css">

*{margin:0px;padding:0px;list-style:none}

.box{position:relative;}

.head{width:730px;height:30px;margin:auto;background:pink;font-family:'楷体';}

.head ul li{float: left;line-height:30px;text-align:center;margin-left:70px;}

.gen{width:70px;height:3px;background:red;position:absolute;margin-left:368px;margin-top:-3px;}

</style>

<script type="text/javascript">

$(function(){

$('li').hover(

function(){

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

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

},

function(){

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

}

);

})


</script>

</head>

<body>

<div class="box">

<div class="head">

<ul>

<li name="0">首页</li>

<li name="1">国际新闻</li>

<li name="2">娱乐天地</li>

<li name="3">科技力量</li>

<li name="4">站点博客</li>

</ul>

</div>

<div class="gen">


</div>

</div>

</body>

</html>

(GEJU`V32L$RB@K45_@8713.png

批改老师:灭绝师太批改时间:2018-12-29 14:31:41
老师总结:完成的不错,案例可以再写的好看点奥,前端毕竟要有视觉上美感

发布手记

热门词条