代碼來襲
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>混合佈局編程挑戰</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.7;
background-color: #888;
margin:0; padding:0; font-size:30px; color:#fff }
.top{background-color:black;height:50px;}
.main{margin:auto;background-color:red;position:relative;}
.left{ background-color:blue;
float:left;width:200px;position:fixed;
top:100px;left:0;
}
.right{background-color:purple;float:right;
width:1000px;margin: 0 auto; padding-top: 100px;
padding-bottom: 300px;
}
.foot{background-color:orange;clear:both;height:50px;}
li {
list-style: none;
}
#content {
}
.right .item{
width: 100%;
height: 540px;
position: relative;
}
.right .item img {
position: absolute;
top:
100px;
left: 40px;
}
.right #item1 {
background: url
("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat
center top;
}
.right #item2 {
background: url
("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat
center top;
}
.right #item3 {
background: url
("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat
center top;
}
.right #item4 {
background: url
("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat
center top;
}
.right #item5 {
background: url
("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat
center top;
}
#menu{
}
.left h1 {
color: #fff;
font-size: 14px;
text-align: center;
background: #ee1111;
line-height: 30px;
}
.left 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;
}
.left ul li a strong {
color: #f1f1f1;
}
.left ul li a:hover,
.left 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");
// 導航菜單實現在滾動條滾動的時候自動設置焦點
var
currentId = "";//當前所在樓層ID（item)
items.each
(function(){//當前位置和每個樓層的位置比較
var m
= $(this);
var itemTop = m.offset().top;
if(top > itemTop - 200){
currentId
= "#" + m.attr("id");//判斷當前所在樓層
} else {
return false;
}
})
var currentLink = menu.find(".current");//找到
帶有current屬性的鏈接
if(currentId &&
currentLink.attr("href") != currentId){//如果currentId爲空或鏈接位置
已經是當前樓層則不執行
currentLink.removeClass
("current");//刪除帶有current屬性的鏈接的current屬性
menu.find("[href=" + currentId + "]").addClass("current")//爲當前
樓層的鏈接添加current屬性
}
});
});
</script>
<body>
<div class="top">top</div>
<div class="main">
<div class="left">
<h1>正在首發</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機皇限量搶</a></li>
<li>
<a href="#item3">
<strong>2014.04.04</strong><br>聯想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>中興天機GRAND S II</a></li>
</ul>
</div>
<div class="right">
<div id="item1" class="item"><img
src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
</div>
<div id="item2" class="item">
<img
src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
</div>
<div id="item3" class="item">
<img
src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
</div>
<div id="item4" class="item">
<img
src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
</div>
<div id="item5" class="item">
<img
src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
</div>
</div>
</div>
<div class="foot">foot</div>
</body>
</html>