                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導(dǎo)航特效

帶jQuery和css3動畫效果

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8"/>
<title>網(wǎng)頁定位導(dǎo)航效果擴展案例</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:100px;
}


/*請補充此處代碼，讓右側(cè)廣告正確顯示*/

#content?.item{
height:540px;
width:1000px;
}

#content?.item{
position:relative;
}

#content?.item?img?{
position:?absolute;
top:?100px;
-webkit-transition:all?0.8s?ease;
-moz-transition:all?0.8s?ease;
-o-transition:all?0.8s?ease;
transition:all?0.8s?ease;
opacity:0;
}

#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;
}

#content?#item1?img{?
right:0px;?
top:126px;
-webkit-transform:translate(0,-100px);
-moz-transform:translate(0,-100px);
-o-transform:translate(0,-100px);
transform:translate(0,-100px);
}
#content?#item2?img{
???right:0px;?
???top:22px;
???-webkit-transform:translate(-100px,0);
???-moz-transform:translate(-100px,0);
???-o-transform:translate(-100px,0);
???transform:translate(-100px,0);
}
#content?#item3?img{?
right:269px;?
top:126px;
-webkit-transform:translate(100px,0);
-moz-transform:translate(100px,0);
-o-transform:translate(100px,0);
transform:translate(100px,0);
}
#content?#item4?img{?
right:269px;?
top:126px;
-webkit-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}
#content?#item5?img{?
right:269px;?
top:80px;
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}
#content?#item1.active?img{?
opacity:1;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
#content?#item2.active?img{?
opacity:1;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
#content?#item3.active?img{?
opacity:1;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
#content?#item4.active?img{?
opacity:1;
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
#content?#item5.active?img{?
opacity:1;
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
/*請補充此處代碼，讓導(dǎo)航菜單在左側(cè)絕對定位顯示*/
#menu{?position:fixed;?top:100px;}

#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:center;
border-bottom:?1px?dashed?#999;
cursor:pointer;
}

#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>
$(function(){
??
$(window).scroll(function(){
var?top?=?$(document).scrollTop();
?????????var?menu?=?$('#menu');
?????????var?items?=?$('#content').find('.item');
var?currentId?=?"";
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');
if(currentId?&&?currentLink.attr('data-href')!=currentId){
currentLink.removeClass('current');
menu.find('[data-href='+currentId+']').addClass('current');
items.removeClass('active');
$(currentId).addClass('active');
}

})
$('#menu').find('a').each(function()?{
????????var?menubar=$(this).attr('data-href');
???var?alink=$('#menu').find('[data-href='+menubar+']');
???alink.click(function()?{
??$("html,body").stop().animate({scrollTop:?$(menubar).offset().top-100},1000);
????})
????});
})
</script>
</head>
<body>
????<div?id="menu">
????????<h1>正在首發(fā)</h1>
????????<ul>
????????????<li><a?data-href="#item1"?class="current"><strong>2014.04.09</strong><br>施華蔻0元贏Smart</a></li>
????????????<li><a?data-href="#item2"><strong>2014.04.05</strong><br>alienware機皇限量搶</a></li>
????????????<li><a?data-href="#item3"><strong>2014.04.04</strong><br>聯(lián)想Miix2?3G平板電腦</a></li>
????????????<li><a?data-href="#item4"><strong>2014.04.03</strong><br>御爵廚房垃圾處理器</a></li>
????????????<li><a?data-href="#item5"><strong>2014.04.01</strong><br>中興天機GRAND?S?II</a></li>
????????</ul>
????</div>
<div?id="content">
????????<div?id="item1"?class="item?active">
????????????<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>