慕课网

源自：8-1 编程挑战
<!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 23:22
个回答
