                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /网页定位导航特效

带jQuery和css3动画效果

<!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:100px;
}


/*请补充此处代码，让右侧广告正确显示*/

#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);
}
/*请补充此处代码，让导航菜单在左侧绝对定位显示*/
#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>正在首发</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>联想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>