jquery 超酷的页面导航滚动效果

效果如下图所示

完整例子

代码如下

复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：超酷的页面滚动效果</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
.nav{width:160px; position:fixed; margin-left:-170px; top:20%; z-index:1999; background:#f0f0f0; border: 1px solid #ccc;
-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
.nav li{height:36px; line-height:36px; border-bottom:1px solid #d3d3d3; text-align:center; cursor:pointer}
.nav li:last-child{border-bottom:none}
.nav li a{display:block; width:98%; height:34px;font-size:16px;}
.nav li a:hover{background:#f9f9f9; text-decoration:none}
.nav li a.cur{background:#ffc}
.box{height:600px; margin: 0 10px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
.box p{line-height:30px; margin:20px; text-align:center; font-size:28px}
.box p span{margin:10px}
#pro,#ser{background:url(img/bg.jpg)}
#news,#con{background:url(img/bg2.gif)}
</style>
<script type="text/javascript" src="1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
navpos();

var pro_top = $("#pro").offset().top;
var news_top = $("#news").offset().top;
var ser_top = $("#ser").offset().top;
var con_top = $("#con").offset().top;
var job_top = $("#job").offset().top;
//alert(tops);
$(window).scroll(function(){
  var scroH = $(this).scrollTop();
  if(scroH>=job_top){
   set_cur(".job");
  }else if(scroH>=con_top){
   set_cur(".con");
  }else if(scroH>=ser_top){
   set_cur(".ser");
  }else if(scroH>=news_top){
   set_cur(".news");
  }else if(scroH>=pro_top){
   set_cur(".pro");
  }
});

$(".nav li a").click(function() {
  var el = $(this).attr('class');
     $('html, body').animate({
         scrollTop: $("#"+el).offset().top
     }, 300);
  $(this).addClass("cur").parent().siblings().find("a").removeClass("cur");
  });

});
$(window).resize(function(){
navpos();
});
function navpos(){
var offset = $("#main").offset().left;
var nav_w = $(".nav").outerWidth();
var left = offset-nav_w;
//alert(left);
if(left>10){
  $(".nav").css("margin-left","-170px");
}else{
  $(".nav").css("margin-left",-(160+left)+"px");
}
}
function set_cur(n){
if($(".nav a").hasClass("cur")){
  $(".nav a").removeClass("cur");
}
$(".nav a"+n).addClass("cur");
}

</script>

</head>

<body>

<div id="main">
<h2 class="top_title">超酷的页面滚动效果</h2>

<ul class="nav">
   <li><a class="pro">产品展示</a></li>
   <li><a class="news">新闻中心</a></li>
   <li><a class="ser">服务支持</a></li>
   <li><a class="con">联系我们</a></li>
   <li><a class="job">人才招聘</a></li>
</ul>
     <div id="pro" class="box">
        <h3>产品展示</h3>
        <p><span class="cur">效果1</span><span><a href="demo2.html">效果2</a></span><span><a href="demo3.html">效果3</a></span></p>
        <br/>

     </div>
     <div id="news" class="box">
        <h3>新闻中心</h3>
     </div>
     <div id="ser" class="box">
        <h3>服务支持</h3>
     </div>
     <div id="con" class="box">
        <h3>联系我们</h3>
     </div>
     <div id="job" class="box" style="height:680px">
        <h3>人才招聘</h3>
     </div>
</div>

</body>
</html>

时间： 2024-10-04 01:11:21

jquery 超酷的页面导航滚动效果

jquery 超酷的页面导航滚动效果的相关文章

jquery实现网页的页面平滑滚动效果代码_jquery

jquery 超酷的页面滚动效果

超酷仿FLASH导航菜单效果

jQuery超酷平面式时钟效果代码分享_jquery

一款基jquery超炫的动画导航菜单可响应单击事件_jquery

Flash8轻松绘制一个超酷的网站导航

太赞了！超炫的页面切换动画效果【附源码下载】

PS将手制作成超酷的水晶玻璃作品效果教程

photoshop如何设计超酷炫的喷溅海报效果