百度新聞首頁導航欄hover效果代碼展示

直接貼代碼：
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>導航欄滑動效果</title>
<style>
.menu-list{
width: 80%;
margin: auto;
overflow: hidden;
background-color: #01204f;
}
.lavalamp-item{
float: left;
list-style: none;
}
.lavalamp-item a{
text-decoration: none;
line-height: 40px;
font-weight: 700;
margin-right: 2px;
padding: 0 10px;
color: #fff;
width: 100%;
position: relative;
font-size: 100%;
}
.lavalamp{
margin: 0;
}
.icon-new {
position: absolute;
right: -8px;
top: -8px;
width: 26px;
height: 13px;
background: url(http://ns2.bdstatic.com/static/fisp_static/common/img/navbar/icon-new_b295ac1.png) no-repeat;
-webkit-transition: margin .1s;
-o-transition: margin .1s;
transition: margin .1s;
}
.lavalamp-object{
background-color: #c00;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function(){
/*
*頁面加載完畢獲取第一個li的width和top值
*賦值為div#active
/
var divWidth = $("#smooth>li").first().width();
var divLeft = $("#smooth>li").first().position().left;
var firstWidth = divWidth;
var firstLeft = divLeft;
$("#active").css({
width: divWidth,
left: divLeft
});
$("#smooth>li").mouseenter(function(){
/
*mouseenter某個li獲取其width和top值
*賦值給#active并加120ms的動畫效果
/
divWidth = $(this).width();
divLeft = $(this).position().left;
$("#active").animate({
width: divWidth,
left: divLeft
},120);
});
$("#smooth").mouseleave(function(){
/
*鼠標離開整個div(沒有點擊li)時
*回到第一個li的位置
*/
$("#active").stop(true,true).animate({
width: firstWidth,
left: firstLeft
},120);
})
})
</script>
</head>
<body>
<div class="menu-list">
<ul class="clearfix lavalamp" style="position: relative;" id="smooth">
<div class="lavalamp-object" id="active" style="position: absolute; height: 40px; top: 0px; left: 0px; overflow: hidden;"></div>
<li class="navitem-index current active lavalamp-item" style="z-index: 5; position: relative;"><a >首頁</a></li>
<li class="icon-new-wrapper lavalamp-item" style="z-index: 5; position: relative;"><a id="nav-hot-link" target="_blank"><div class="icon-new"></div>百家</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >財經</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >娛樂</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >體育</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >互聯網</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a ><div class="icon-new"></div>時尚</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >汽車</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >國內</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >國際</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >軍事</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >社會</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >視頻</a></li>
<li class="media-container lavalamp-item" style="z-index: 5; position: relative;">
<a target="_blank" class="link-trigger">傳媒</a>
<div class="links-container clearfix" style="display: none;">
<a target="_blank">參考消息</a>
<a target="_blank">南方周末</a>
<a target="_blank">澎湃</a>
<a target="_blank">南方都市報</a>
<a target="_blank">21世紀經濟報道</a>
<a target="_blank">第一財經日報</a>
<a target="_blank">華西都市報</a>
<a target="_blank">財新網</a>
<a target="_blank">瀟湘晨報</a>
<a target="_blank">北京青年報</a>
</div>
</li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a target="_blank">個性推薦</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a >房產</a></li>
<li class="lavalamp-item" style="z-index: 5; position: relative;"><a mon="toptab=newssite&resouci=1">名站</a></li>
<li class="more-container lavalamp-item" style="z-index: 5; position: relative;">
<a href="#" class="more-trigger">更多</a>
<div class="more-links" style="display: none;">
<a >科技</a>
<a >女人</a>
<a >游戲</a>
</div>
</li>
</ul>
</div>
</body>
</html>
</pre>

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容