模仿百度经验效果
---------------效果图-----------------
-------------------代码-----------------------------
<!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="Content-Type" content="text/html; charset=utf-8" /> <title>个人简历--么东欣</title> <script src="jquery.min.js"></script> <style type="text/css"> <!-- *{ font-family:Verdana, Geneva, sans-serif; color:#000} ul,ol{list-style-image: none; list-style-type: none; margin: 0 auto; padding: 0;} a{text-decoration:none;} body{} h1,h2,h3,h4,h5,h6,p,form{font-weight:normal;margin:0;padding:0;} .wrap{ position:relative; width:750px; padding-left:20px; } .list-cont ul{ width:750px;} .list-cont ul li{ margin-left:10px; width:695px; padding:45px 25px; border-left:dotted 2px #ccc; position:relative; font-size:16px;} .list-icon{ width:32px; height:32px; background:url(step_ol_bg.png) no-repeat; position:absolute; left:-18px;top:36px; z-index:9; text-align:center; line-height:32px; font-size:18px;color:#fff} .list-cont ul li.list01{ padding-top:0;} .list-cont ul li.list01 .list-icon{top:-5px} .icon-link{background:url(step_ico_bg.png) 0 -68px no-repeat;width:32px; height:32px;text-align:center; line-height:32px; font-size:18px;color:#fff; display:none;} .icon-link:hover{ background:url(step_ico_bg.png) 0 -34px no-repeat;} .list-icon-group{ position:fixed; left:22px; top:0px; z-index:11 } .curr-list{ visibility:hidden;} .curr{ background:url(step_ico_bg.png) 0 -34px no-repeat; display:block;} .haha{ width:700px; line-height:50px;text-align:center; font-weight:bold; font-size:18px; font-family:"微软雅黑";} p{ padding:5px 10px; background:#C7F3F1; margin:2px 0;; line-height:30px; font-size:16px;} h3{ background:#1AA9EE; font-size:18px; line-height:40px; font-weight:bold; padding-left:8px; overflow:hidden; color:#E8FFFE} .close,.open{ float:right; padding-right:20px; cursor:pointer; color:#E8FFFE} .open{ display:none} --> </style> </head> <body> <div class="haha">个人简历</div> <div class="wrap"> <div class="list-cont"> <ul class="list_ul"> <li class="list list01" id="step01"><div class="list-icon">1</div><h3><span class="close">收起</span><span class="open">展开</span>1.基本信息</h3> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> <p>基本信息</p> </li> <li class="list list02" id="step02"><div class="list-icon">2</div><h3><span class="close">收起</span><span class="open">展开</span>2.联系方式</h3> <p>联系方式</p> <p>联系方式</p> <p>联系方式</p> </li> <li class="list list03" id="step03"><div class="list-icon">3</div><h3><span class="close">收起</span><span class="open">展开</span>3.培训经历</h3> <p>培训经历</p> </li> <li class="list list03" id="step04"><div class="list-icon">4</div><h3><span class="close">收起</span><span class="open">展开</span>4.证书、获奖</h3> <p>培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历</p> </li> <li class="list list04" id="step05"><div class="list-icon">5</div><h3><span class="close">收起</span><span class="open">展开</span>5.工作经验</h3> <p>培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历</p> </li> <li class="list list05" id="step06"><div class="list-icon">6</div><h3><span class="close">收起</span><span class="open">展开</span>6.案例</h3> <p>培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历</p> </li> <li class="list list06" id="step07"><div class="list-icon">7</div><h3><span class="close">收起</span><span class="open">展开</span>7.兴趣爱好</h3> <p>喜欢上网，交友，爬山,旅游，喜欢尝试新事物</p> </li> <li class="list list06" id="step08"><div class="list-icon">8</div><h3><span class="close">收起</span><span class="open">展开</span>8.自我评价</h3> <p>培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历培训经历</p> </li> </ul> </div> <div class="list-icon-group"> <a class="icon-link" href="javascript:return false;">1</a> <a class="icon-link" href="javascript:return false;">2</a> <a class="icon-link" href="javascript:return false;">3</a> <a class="icon-link" href="javascript:return false;">4</a> <a class="icon-link" href="javascript:return false;">5</a> <a class="icon-link" href="javascript:return false;">6</a> <a class="icon-link" href="javascript:return false;">7</a> <a class="icon-link" href="javascript:return false;">8</a> </div> <script> $(function(){ var otherh=$(".haha").outerHeight();//计算容器上部分内容的高度 //alert(otherh); var ln=$(".list").length;//alert(ln); var i=0 var heights=50; function scrollfun(){ var totalH=0; heights=0; var windowST=$(window).scrollTop()-otherh; if(windowST<0){ //alert(windowST) $(".list-icon").css("visibility","visible"); $(".icon-link").css("display","none"); } for(i=0;i<ln;i++){ //$(".tt").text(totalH);实现按钮的切换 if(parseInt(windowST)>parseInt(heights)){ //alert(i) var n=i; $(".list-icon:lt("+n+")").css("visibility","hidden"); $(".list-icon:eq("+n+")").css("visibility","hidden"); $(".list-icon:gt("+n+")").css("visibility","visible") $(".icon-link:lt("+n+")").removeClass("curr"); $(".icon-link:lt("+n+")").css("display","block"); $(".icon-link:gt("+n+")").css("display","none"); $(".icon-link:eq("+n+")").css("display","block"); $(".icon-link:eq("+n+")").addClass("curr"); totalH+=$(".list:eq("+i+")").outerHeight(); heights=totalH-32*i; continue; } } var groupV=windowST-$(".list-cont").outerHeight()+n*32; if(groupV>0){ var num=Math.ceil(groupV/32); $(".icon-link:lt("+num+")").css("display","none"); } } $(window).scroll(function(){scrollfun();}); $(".icon-link").click(function(){//点击返回相应列表 var m=$(this).html()-1; var outerHs=0; var j=0; for(j=0;j<m;j++){ outerHs+=parseInt($(".list:eq("+j+")").outerHeight()); } if(j>0){ var toH=otherh+outerHs+20+32-32*j; }else{ var toH=otherh+10; } //alert(outerHs+"00000000"+toH) $(window).scrollTop(toH); scrollfun(); }) $(".close").click(function(){ $(this).parents("h3").siblings("p").stop(true,true).slideUp(); $(this).hide(); $(this).siblings(".open").show(); }) $(".open").click(function(){ $(this).parents("h3").siblings("p").stop(true,true).slideDown(); $(this).hide(); $(this).siblings(".close").show(); }) }) </script> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </body> </html>
-----------------------用到的图片-------------------------------
