<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页定位导航效果扩展案例</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; text-align: center;}
/*请补充此处代码，让右侧广告正确显示*/
.item{
width: 100%;
height: 525px;
margin: 0 auto;
margin-bottom: 5px;
position: relative;
}
#content .item img {
position: absolute;
}
#content #item1 img{
top:100px;
right: 0px;
}
#content #item3 img{
top:110px;
right:200px;
}
#content #item4 img,#content #item5 img{
top:20px;
right:250px;
}
#content #item1 { background: url("images/bj1.jpg") no-repeat center top; }
#content #item2 { background: url("images/bj2.jpg") no-repeat center top; }
#content #item3 { background: url("images/bj3.jpg") no-repeat center top; }
#content #item4 { background: url("images/bj4.jpg") no-repeat center top; }
#content #item5 { background: url("images/bj.jpg") no-repeat center top; }
/*请补充此处代码，让导航菜单在左侧绝对定位显示*/
#menu{
position: fixed;
top:100px;
right: 50%;
margin-right: 300px;
z-index: 1;
}
#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");
var currentId="";
// 让导航菜单实现在滚动条滚动的时候自动设置焦点
items.each(function(){
var itemTop=$(this).offset().top;
if(top>itemTop-150){
currentId="#"+$(this).attr("id");
}else{
return false;
}
});
if(currentId&&!menu.find("[href="+currentId+"]").attr("class")){
menu.find(".current").removeClass('current');
menu.find("[href="+currentId+"]").addClass('current');
}
});
});
</script>
</head>
<body>
<div id="menu">
<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 id="content">
<div id="item1" class="item">
<img src="images/wash.jpg"/>
</div>
<div id="item2" class="item">
<img src="images/girl.jpg"/>
</div>
<div id="item3" class="item">
<img src="images/pc.jpg"/>
</div>
<div id="item4" class="item">
<img src="images/friut.jpg"/>
</div>
<div id="item5" class="item">
<img src="images/phone.jpg"/>
</div>
</div>
</body>
</html>
pnnpnn
2014-09-20
0 回答
举报
0/150
提交
取消
