<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
display: block;
border: 0;
}
.wrapper {
width: 752px;
border: 1px solid #ccc;
padding: 10px 0;
font-family: arial;
/*overflow: hidden;*/
margin: 100px auto;
}
.clearfix:after {
content: '.';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
.wrapper li {
float: left;
margin: 0 10px 10px 0;
width: 178px;
height: 125px;
overflow: hidden;
position: relative;
}
.wrapper li div, .wrapper li p {
width: 178px;
height: 25px;
position: absolute;
font-size: 14px;
text-align: center;
line-height: 25px;
color: white;
left: 0;
bottom: -25px;
_bottom: -26px;
}
.wrapper li div {
background-color: #000;
}
.wrapper li p {
background: url(imgs/bg.png) no-repeat 5px 0;
}
</style>
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function () {
$(".wrapper li")
// 尾部添加一個div和p標簽
.append("<div></div><p>百度一下，你就知道</p>")
.children("div")
// 設置透明度
.fadeTo(500, 0.5)
.next("p")
// 遍歷p，添加參數，獲得索引值和對象
.each(function (index, ele) {
var y = index * 25
// 設置精靈圖位置
$(ele).css("background-position", "5px -" + y + "px")
});
// 自定義動畫，使用stop方法，阻止序列執行動畫
$(".wrapper li").mouseenter(function () {
$(this).children("div,p").stop().animate({
"bottom": "0"
}, 300);
}).mouseleave(function () {
$(this).children("div,p").stop().animate({
"bottom": "-25px"
}, 300);
})
});
</script>
</head>
<body>
<div class="wrapper clearfix">
<ul>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
<li><a href="###"></a>
</li>
</ul>
</div>
</body>
</html>
jQuery —— 導航效果
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- 后臺的同事因為把nav公用了，所以無法單頁添加active，一下方法通過判斷url的后綴給當前頁添加active ...
- jQuery簡單實現導航欄根據滑動自動懸浮效果 今天在網上看一些別人的一些網站，都覺得很厲害，寫插件什么的，無意間...
- 上一篇已經完成了導航欄效果的漸變。但是側滑返回的時候，導航欄從不透明界面跳轉到透明界面時，總是會突變，感覺很膈應。...
