H5实战(三)：路径图页面布局

1.目标效果

实现一个不同阶段的导航布局，如实现学习的各个阶段的路径导航页面。有一条线为轴，左侧是每个阶段的题目，右侧为相应的学习课程的展示。

2.实现思路

1）首先制作左侧导航部分的效果，是为标题导航部分，使用div的左边框作为轴，并以span边框显示为正方形作为轴上的点，将整个装有标题的div移到轴的左边，并用span标签制作三角形的箭头，制作箭头的方式是设定宽度和高度为0，设定border的大小，此时四个方向的border都是三角形的，将想要显示出来的两个方向设定颜色，将另外两个方向颜色设置为透明。至此，导航部分制作完毕。

2）然后制作右侧课程部分：导入图片并添加文字，设置相关样式，记为页面一。

3）制作鼠标移入的页面，可设定top值为原来div的高度，而原div在溢出时隐藏，设定其样式，记为页面二。

4）jquery实现鼠标移入效果：监听mouseover事件，当触发时，找到页面二，使用TweenMax制作动画效果，使其top值改变，也可以为页面一设置样式；鼠标移出时，页面一样式恢复，top改变为原div高度。

3.代码实现

1）html部分：

 <div class="coursecontent w-1000" >
        <div class="lessonlist">
            <div class="learn-lessonlist cf">
                <span class="stageicon"></span>
                <div class="stagewaring-box">
                    <span class="jiantou-right"></span>
                    <div class="textcontent">
                        <h3>第一阶段，</h3>
                        <p>环境搭建</p>
                    </div>
                </div>
                <div class="lessonimgbox">
                    <a href="#">
                        <div class="img-box">
                            <img src="../images/img1.jpg">
                        </div>
                        <h3>环境搭建</h3>
                        <div class="imgboxfoot">
                            <span class="minandtime">30min 10课时</span>
                        </div>
                        <div class="img-pop">
                            <blockquote>
                                <p>java语言－面向对象的思想java语言－面向对象的思想java语言－面向对象的思想java语言－面向对象的思想java语言－面向对象的思想</p>
                            </blockquote>
                            <div class="time-user-number">
                                <span>2014-10-10</span><span>2000人在学习</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

2）css部分

body,h3,p{
    margin:0px;
    padding:0px;
}
h3{
    font-size: 100%;
    font-weight:normal;
}
body{
    background-color: #f1f1f1;
}
a{
    text-decoration: none;
}
.cf:after{
    content:'';
    display:block;
    clear:both;
}
.w-1000{
    width:1000px;
    margin:0 auto;

}
.coursecontent .lessonlist{
    padding:60px 0px 60px 0px;
    width:780px;
    float: right;
    border-left:5px solid #e4e4e4;
}
.coursecontent .lessonlist .learn-lessonlist{
    margin-bottom:30px;
    position: relative;

}
.coursecontent .lessonlist .learn-lessonlist .stageicon{
    position:absolute;
    z-index:30;
    top:0px;
    left:-17px;
    width:20px;
    height:20px;
    display:block;
    border:5px solid #e4e4e4;
    background-color: #f1f1f1;
}
.coursecontent .lessonlist .learn-lessonlist .stagewaring-box{
    width:160px;
    height:80px;
    padding:10px;
    position: absolute;
    left:-230px;
    top:0px;
    background-color: white;
}
.coursecontent .lessonlist .learn-lessonlist .stagewaring-box .jiantou-right{
    position:absolute;
    top:0px;
    right:-25px;
    display:block;
    width:0px;
    height: 0px;
    border-width:10px 13px;
    border-style:solid;
    border-color:#fff #f1f1f1 #f1f1f1 #fff;

}
.coursecontent .lessonlist .learn-lessonlist .stagewaring-box .textcontent{
    width:150px;
    height:80px;
    overflow:hidden;
}
.coursecontent .lessonlist .textcontent h3{
    font-size:18px;
    color:#101213;
    line-height:30px;
}
.coursecontent .lessonlist .textcontent p{
    font-size:12px;
    line-height: 22px;
    color:#707171;
}
.coursecontent .lessonlist .lessonimgbox{
    float:left;
    margin-left:30px;
    margin-bottom:15px;
    width:230px;
    height:230px;
    overflow:hidden;
    background:#fff;
    position:relative;
    cursor: pointer;
}
.lessonimgbox .img-box{
    overflow:hidden;
    width:100%;
    height:130px;
    margin-bottom:5px;
}
.lessonimgbox .img-box img{
    display: block;
    width: 100%;
    height:130px;
}
.lessonimgbox h3{
    height: 48px;
    padding:0px 10px;
    overflow: hidden;
    font-size: 16px;
    line-height:24px;
}
.lessonimgbox a h3, .lessonimgbox a:hover h3, .lessonimgboxa:visited h3{
    color:#273346;
}
.lessonimgbox .imgboxfoot{
    background: #fff;
    height:30px;
    line-height:30px;
    font-size:12px;
    color:#a9a9a9;
    padding:0px 10px;
    position:absolute;
    bottom:0;
    width:210px;
    clear:both;
    left:0;
    z-index:50;
}
.lessonimgbox .imgboxfoot .minandtime{
    float:right;
}
.lessonimgbox .img-pop{
    width:230px;
    height:210px;
    padding:10px 0px;
    top:230px;
    position:absolute;
    left:0px;
    z-index:40;
    background: #fff;
}
.lessonimgbox .img-pop blockquote p{
    padding:10px;
    font-size:12px;
    line-height:16px;
    height:85px;
    overflow:hidden;
    color:#8d8d8d;
}
.lessonimgbox .img-pop .time-user-number{
    padding:10px;
    font-size:12px;
    line-height:16px;
    color:#8d8d8d;
}
.lessonimgbox .img-pop .time-user-number span:nth-child(2){
    float:right;
}

3）js部分：

var jkcommon = {
    init: function () {
        this.lessImgShow();
    },
    stopeventBubble:function(event){
        var e = event;
        if(e){
            e.stopPropagation();
        }
    },
    lessImgShow:function (){
    $('.lessonimgbox').bind("mouseover", function(e){
        var _pop = $(this).find('.img-pop');
        $(this).css({border: "2px solid #1abc9c", width: "226px", height: "226px"});
        TweenMax.to(_pop, 0.5, {top: 50, ease: Bounce.easeOut});
        jkcommon.stopeventBubble(e);
    })
        $(document).bind("mouseover",function () {
            $('.lessonimgbox').css({border:"0", width:"230px",height:"230px"});
            var _pop = $(this).find(".img-pop");
            TweenMax.to(_pop, 0.5,{top:230, ease:Linear.easeNone});
        })
}
}
$(function () {
    jkcommon.init();
})

4.最终效果

可对div进行复制，实现最终的课程导航页面。