jquery防百度百科/淘宝/页面滚动效果

例1 ,防百度百科页面滚动效果

 

 代码如下 复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery防百度百科页面滚动效果</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="http://ajax.googleapis.com/ajax/libs/jquery/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>

例2,防淘宝网右边滚动效果

 代码如下 复制代码

<!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:50px; /*position:fixed; right:5px;*/ position:fixed; margin-left:920px; top:30%; 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:50px; line-height:50px; border-bottom:1px solid #d3d3d3; background:url(img/icon.png) no-repeat; text-align:center; cursor:pointer}
.nav li:hover{background-color:#f9f9f9; text-decoration:none}
.nav li:last-child{border-bottom:none}
.nav li.cur{background-color:#ffc}
.nav li.pro{background-position:0 0}
.nav li.news{background-position:0 -55px}
.nav li.ser{background-position:0 -105px}
.nav li.con{background-position:0 -155px}
.nav li.job{background-position:0 -207px}
.box{height:500px; 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.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").click(function() {
  var el = $(this).attr('class');
  $('html, body').animate({
    scrollTop: $("#"+el).offset().top
   },{
          easing: 'easeOutSine',
          duration: 300,
          complete:function(){
   }
   });
  });
});
$(window).resize(function(){
  navpos();
});
function navpos(){
 var page_w = $(document).width();
 var offset = $("#main").offset().left;
 var main_w = $("#main").outerWidth();
 var right = page_w-offset-main_w-50;
 //alert(right);
 if(right>10){
  $(".nav").css('right',right-10);
 }else{
  $(".nav").css('right',10);
 }
}
function set_cur(n){
 if($(".nav li").hasClass("cur")){
  $(".nav li").removeClass("cur");
 }
 $(".nav li"+n).addClass("cur");
}
</script>
</head>

<body>

<div id="main">
  <h2 class="top_title">超酷的页面滚动效果</h2>
  <ul class="nav">
    <li class="pro"></li>
    <li class="news"></li>
    <li class="ser"></li>
    <li class="con"></li>
    <li class="job"></li>
</ul>
     <div id="pro" class="box">
        <h3>产品展示</h3>
        <p><span><a href="demo.html">效果1</a></span><span>效果2</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>

例3，固定在页面底部效果

 代码如下 复制代码

<!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:410px; height:36px; position:fixed; bottom:1px; margin-left:250px;  z-index:1999; background:#f0f0f0; border: 1px solid #ccc;
  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);}
.nav li{height:36px; line-height:36px; float:left; padding:0 8px; border-right:1px solid #d3d3d3; text-align:center; cursor:pointer}
.nav li a{display:block; height:34px;font-size:16px;}
.nav li a:hover{background:#f9f9f9; text-decoration:none}
.nav li:last-child{border-right:none}
.nav li a.cur{color:#f60}
.box{height:800px; 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
 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
   },{
          easing: 'easeOutSine',
          duration: 300,
          complete:function(){
   }
   });
  });
});

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><a href="demo.html">效果1</a></span><span><a href="demo2.html">效果2</a></span><span>效果3</span></p>
      
     <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>

源码下载地址:http://file.111cn.net/upload/2013/10/pageScroll.rar

时间： 2024-09-14 13:11:27

jquery防百度百科/淘宝/页面滚动效果的相关文章

jQuery实现div浮动层跟随页面滚动效果

 这篇文章主要介绍了jQuery实现div浮动层跟随页面滚动效果,需要的朋友可以参考下  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"

jQuery实现div浮动层跟随页面滚动效果_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

百度重新收录淘宝页面 淘宝客作用日益淡化

百度时隔三年再度收录淘宝 近日有多位站长向站长网admin5.com爆料,称百度时隔三年后再度重新收录淘宝网页面.通过site指令可以发现,百度确实重新收录淘宝,搜索结果有28万之多,前六页基本为淘宝网旗下产品和淘宝商城知名网店的二级域名,而后面的页面则开始收录淘宝店铺的网址.快照方面,大部分为8月中旬和9月初最新.通过查看淘宝网的robots.txt可以发现,淘宝对于百度蜘蛛依然处于禁止状态.基本可以确定百度单方面已经重新开放对淘宝页面的收录.作为国内互联网的两家巨头,百度和阿里在电子商务方面

百度、淘宝低调上线微购平台 指在内测期

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 百度在4月1日的时候低调上线了一个电商产品微购平台,就在10几天之后,淘宝相继也上线了一个微淘.虽然两个平台都是比较低调的上线,不过还是有不少网友将其爆料了出来.笔者也就根据互联网上面的报道,也去搜索了一下百度的薇购平台,发现首页很简介,有一个手机号码验证方式,输入手机号码将验证码提交后就可以通过了.很多网友猜测,百度又在搞什么阴谋了?笔者今

jquery仿百度百科底部浮动导航特效_jquery

jquery类似百度百科底部导航预览,代码很简单,这里就不多废话了. 效果图: CSS  * { margin: 0; padding: 0 } .wrap { width: 1000px; overflow: hidden; margin: 0 auto; } .content { width: 780px; float: left; } .slide { width: 200px; float: right; } HTML <div class="wrap"> <

js 广告延迟加载代码(百度 Google 淘宝)

方法一,最简单的把广告放在最网页最后面,然后利用替换即可.  代码如下 复制代码 //前面加载广告的地方代码: <div id="dy_01">广告代码1调用ing(可以改成其他的第二世界整理发布话)</div> <div id="dy_02">广告代码2调用ing(可以改成其他的话)</div> //<div>可以用<span>代替 //放在最后面(如放在</body>上面)代码:

图解百度与淘宝关于robots屏蔽上的那件事

在08年闹得沸沸扬扬的关于淘宝使用robots协议屏蔽百度蜘蛛的事件,想必有经历过那个事件的人现在还记忆犹新,淘宝以有不良的商家会通过百度的进行竞价排名或者搜索引擎优化的方式来欺骗消费着的原因,无情的拒绝了百度的搜索引擎,而通过的方法就是使用robots协议屏蔽百度.如下图所示.   我们可以看到,淘宝已经在robots中拒绝了百度蜘蛛对整个站点的索引与收录.事件已经过去四年左右了,那结果真的就是百度无法抓取淘宝的页面吗?事实是,百度并没有遵守robots协议,还是对淘宝的部分页面进行了抓取.如

百度恶战淘宝：只为挤占C2C

中介交易 SEO诊断 淘宝客 云主机 技术大厅 进入八月,阿里巴巴与百度争夺网络广告市场的战争日渐升级.一个是搜索领域霸主,一个是电子商务巨头,过去曾合作共赢,今朝却干戈相向! 百度与阿里巴巴这几年都开始多元化发展,百度不再是单纯的搜索公司,阿里巴巴也不仅仅做电子商务.双方除C2C,在网站联盟.网络广告,搜索等领域都有直接竞争或摩擦. "三鹿与百度签定300万广告投放协议以享受负面新闻删除"遭到曝光后,百度"及时踢开"三鹿,但百度还是跳进黄河洗不清.从9月12日开始

百度VS淘宝 双方火拼看家本领

中介交易 SEO诊断 淘宝客 云主机 技术大厅 2008年10月8日,淘宝突然宣布,将在未来五年之内投入50亿元人民币来发展网络购物市场,而在三个月前的淘宝五周年庆典上,马云宣布的数字则为20亿人民币.是什么促使了淘宝在短短三个月内就做出了增加30亿人民币投入的决心呢? 百度,更确切地说,是百度已经推出的网络购物平台"有啊". 淘宝和百度掐架?要是放在几年前,或许谁也不会想到,会有这么一天. 确实,作为目前中国最为成功的互联网企业之一,淘宝网占据着中国网购市场的80%-90%强,而百度