模仿米家有品网页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();    } });