編程挑戰(zhàn)
本代碼利用課程中所學(xué)的知識(shí)實(shí)現(xiàn)了簡(jiǎn)單的類似于天貓新首發(fā)頁面的效果，天貓新首發(fā)頁面在導(dǎo)航效果的基礎(chǔ)上又加入了很多額外的特效，感興趣的同學(xué)可以在此基礎(chǔ)上發(fā)揮想象，把效果做得更加完善。
溫馨提示:完成任務(wù)后，請(qǐng)驗(yàn)證是否與實(shí)踐效果一致，如一致，恭喜您，你已經(jīng)掌握此知識(shí)，否則，請(qǐng)重新學(xué)習(xí)些課程吆，直到與結(jié)果效果一致。
任務(wù)
1. 讓右側(cè)廣告正確顯示
注意: 選擇正確的尺寸和滾動(dòng)條的隱藏。
2. 讓導(dǎo)航菜單在左側(cè)絕對(duì)定位顯示
注意: 定位和選擇正確的position。
3. 讓導(dǎo)航菜單實(shí)現(xiàn)在滾動(dòng)條滾動(dòng)的時(shí)候自動(dòng)設(shè)置焦點(diǎn)
注意：注意用到教程中所學(xué)的知識(shí)，遍歷items設(shè)置currentId，然后給菜單設(shè)置current類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>網(wǎng)頁定位導(dǎo)航效果擴(kuò)展案例</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.7;
background-color: #888;
}
li {
list-style: none;
}
#content {
width: 1000px;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 300px;
}
/*請(qǐng)補(bǔ)充此處代碼，讓右側(cè)廣告正確顯示*/
#content .item img {
position: absolute;
top: 100px;
left: 40px;
}
#content #item1 {
background: url("http://img1.sycdn.imooc.com//536c9ea800013ae610000540.jpg") no-repeat center top;
}
#content #item2 {
background: url("http://img1.sycdn.imooc.com//536c9ecd0001606d10000540.jpg") no-repeat center top;
}
#content #item3 {
background: url("http://img1.sycdn.imooc.com//536c9f0a0001ccc310000540.jpg") no-repeat center top;
}
#content #item4 {
background: url("http://img1.sycdn.imooc.com//536c9f6700012e9010000540.jpg") no-repeat center top;
}
#content #item5 {
background: url("http://img1.sycdn.imooc.com//536c9f800001b28510000540.jpg") no-repeat center top;
}
/*請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單在左側(cè)絕對(duì)定位顯示*/
#menu h1 {
color: #fff;
font-size: 14px;
text-align: center;
background: #ee1111;
line-height: 30px;
}
#menu ul li a {
display: block;
margin: 5px 0;
font-size: 12px;
color: #ccc;
width: 160px;
padding: 10px 20px;
text-decoration: none;
text-align: left;
border-bottom: 1px dashed #999;
}
#menu ul li a strong {
color: #f1f1f1;
}
#menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #666;
}
/*ie6 hack*/
* html, * html body {
background-image: url(about:blank);
background-attachment: fixed;
}
* html #menu {
/*position: fixed;*/
position: absolute;
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var top = $(document).scrollTop();
var menu = $("#menu");
var items = $("#content").find(".item");
// 請(qǐng)補(bǔ)充此處代碼，讓導(dǎo)航菜單實(shí)現(xiàn)在滾動(dòng)條滾動(dòng)的時(shí)候自動(dòng)設(shè)置焦點(diǎn)
});
});
</script>
</head>
<body>
<div id="menu">
<h1>正在首發(fā)</h1>
<ul>
<li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施華蔻0元贏Smart</a></li>
<li><a href="#item2"><strong>2014.04.05</strong><br>alienware機(jī)皇限量搶</a></li>
<li><a href="#item3"><strong>2014.04.04</strong><br>聯(lián)想Miix2 3G平板電腦</a></li>
<li><a href="#item4"><strong>2014.04.03</strong><br>御爵廚房垃圾處理器</a></li>
<li><a href="#item5"><strong>2014.04.01</strong><br>中興天機(jī)GRAND S II</a></li>
</ul>
</div>
<div id="content">
<div id="item1" class="item">
<img src="http://img1.sycdn.imooc.com//536ca02800014e7105000400.jpg">
</div>
<div id="item2" class="item">
<img src="http://img1.sycdn.imooc.com//536ca04b0001dbeb04520519.jpg">
</div>
<div id="item3" class="item">
<img src="http://img1.sycdn.imooc.com//536ca06200016a4d03950387.jpg">
</div>
<div id="item4" class="item">
<img src="http://img1.sycdn.imooc.com//536ca0ab0001c89205000400.jpg">
</div>
<div id="item5" class="item">
<img src="http://img1.sycdn.imooc.com//536ca0830001b17f05000400.jpg">
</div>
</div>
</body>
</html>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
