码迷,mamicode.com
首页 > 其他好文 > 详细

模仿百度经验效果

时间:2016-08-23 16:31:14      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

---------------效果图-----------------

技术分享

-------------------代码-----------------------------

<!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>

-----------------------用到的图片-------------------------------

技术分享技术分享

 

模仿百度经验效果

标签:

原文地址:http://www.cnblogs.com/youzhuxiaoyao/p/5799464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!