模仿米家有品网页3

html`

            </div>
            <div class="right-thr" style="width: 38px;height: 38px;">

            </div>
            <div class="section-top content">
                <h2>
                    热门
                    <span class="sec-top-two">大家都爱的贴心好物</span>
                </h2>
            </div>
            <div style="height:324px ;">
                <div  class="thrid-all-img" img-index="one" top="untoped">
                    <div class="thrid-img">
                        <img style="margin-bottom:120px;" src="img/thrid-1.jpg"/>
                    </div>
                    <div class="thrid-p">

                        <span class="thrid-p-0" >3D 七孔保暖被</span>
                        <span class="thrid-p-1">1:4:1黄金比填充，更轻更暖不压..</span>
                        <span class="thrid-p-2">￥</span>
                        <span class="thrid-p-3">229</span>
                        <span class="thrid-p-4">起</span>
                        <div class="thrid-icon line-block">直降</div>
                    </div>
                </div>
                <div class="thrid-all-img" img-index="two" top="untoped">
                    <div class="thrid-img">
                        <img src="img/thrid-1.jpg"/>
                    </div>
                    <div class="thrid-p">
                        <span class="thrid-p-0" >3D 七孔保暖被</span>
                        <span class="thrid-p-1">1:4:1黄金比填充，更轻更暖不压..</span>
                        <span class="thrid-p-2">￥</span>
                        <span class="thrid-p-3">229</span>
                        <span class="thrid-p-4">起</span>
                        <div class="thrid-icon line-block">直降</div>
                    </div>
                </div>
                <div class="thrid-all-img" img-index="sri" top="untoped">
                    <div class="thrid-img">
                        <img src="img/thrid-1.jpg"/>
                    </div>
                    <div class="thrid-p">
                        <span class="thrid-p-0" >3D 七孔保暖被</span>
                        <span class="thrid-p-1">1:4:1黄金比填充，更轻更暖不压..</span>
                        <span class="thrid-p-2">￥</span>
                        <span class="thrid-p-3">229</span>
                        <span class="thrid-p-4">起</span>
                        <div class="thrid-icon line-block">直降</div>
                    </div>
                </div>
                <div class="thrid-all-img" img-index="for" top="untoped">
                    <div class="thrid-img">
                        <img src="img/thrid-1.jpg"/>
                    </div>
                    <div class="thrid-p">
                        <span class="thrid-p-0" >3D 七孔保暖被</span>
                        <span class="thrid-p-1">1:4:1黄金比填充，更轻更暖不压..</span>
                        <span class="thrid-p-2">￥</span>
                        <span class="thrid-p-3">229</span>
                        <span class="thrid-p-4">起</span>
                        <div class="thrid-icon line-block">直降</div>
                    </div>
                </div>
                </div>
            </div>
        </div>`

css

.thrid{
    margin-top: 80px;
    background: #f5f5f5;
}
.thrid-img img{

    position: absolute;
    z-index: 1;
    margin-left:35px;
    width: 195px;
    height: 195px;
}
.thrid-all-img{
    margin-left: 3px;
    cursor: pointer;
    background: #ffffff;
    float: right;
    width: 266px;
    height: 281px;
}
.thrid-all{
    margin-left: 220px;
    position: absolute;
    height:352px;
}
.thrid-img{

    margin: 0 auto;
}
.thrid-p{
    margin-top:180px ;
    font-family: "微软雅黑";
    font-size: 16px;
}
.thrid-p-0{
    margin-left:69px;
}
.thrid-p-1{
    margin-top: 25px;
    margin-left:25px;
    display: block;
    font-size: 14px;
    color: #999999;
}
.thrid-p-2{
    margin-top: 51px;
    margin-left:89px;
    font-family: "微软雅黑";
    color: red;
    font-size: 12px;
}
.thrid-p-3{
    margin-top: 50px;
    margin-left:103px;
    font-family: "微软雅黑";
    color: red;
    font-size: 14px;
}
.thrid-p-4{
    margin-left:130px;
    margin-top: 51px;
    font-family: "微软雅黑";
    color: red;
    font-size: 12px;
}
.thrid-icon{
    margin-left:150px;
    margin-top: 50px;
    font-size: 12px;
    padding: 0 6px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    background: #C00000;
}
.thrid-all-img{
    box-shadow: 0px 0px 0px #FFFFFF;
    transition: box-shadow 0.5s;
    margin-right: 1px;
    margin-top:30px
}
.thrid-all-img:hover{
    box-shadow: 4px 6px 8px #E7E7E7;
    transition: box-shadow 0.5s;
}
.thrid{
    background: #F5F5F5;
    height: 400px;
    padding-top: 30px;
}
#thrid-img-1{

}
.thrid-p span{
    position: absolute;
    z-index:99;

}
.thrid-p div{
    z-index: 1;
    position: absolute;
}
.thrid-all-img img{


}

js

function dis_more_img(index){
        var attry = new Object;
        attry[1] = 
        "<div>"+
        "<img src='img/dis-content-img-1.jpg' />"+
        "<p>1212特惠</p>"+
        "</div>"+
        "<div>"+
        "<img src='img/dis-content-img2.jpg' />"+
        "<p>新品</p>"+
        "</div>"+
        "<div>"+
        "<img src='img/dis-content-img3.jpg' />"+
        "<p>当季</p>"+
        "</div>";

        attry[2] = 
        "<div>"+
        "<img src='img/dis-content-img4.jpg' />"+
        "<p>床垫</p>"+
        "</div>"+
        "<div>"+
        "<img src='img/dis-content-img5.jpg' />"+
        "<p>被枕</p>"+
        "</div>"+
        "<div>"+
        "<img src='img/dis-content-img3.jpg' />"+
        "<p>当季</p>"+
        "</div>";
        $('.dis-more').html(attry[index]);
}
 $('.head ul').on({
    mouseenter:function(){
        $('.head ul').attr('inul','yes');
        console.log('jirru');
    },
    mouseleave:function(){
         inul = 0 ;
         $('.head ul').attr('inul','no');
         console.log('ul推出')
         hide();
    }
 });