左右显示的气泡信息布局

2018-06-24 02:20:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

左右气泡信息,这种展示效果用代码写并不难,但是我觉得这种布局很有意思,所以就记录下来了~~

效果图:

html:
<div class="msg-box">
                <div class="msg-list">
                     <b class="bgfff"></b>
                     <div class="list-line">
                         <div class="list">
                             <h3>回单已确认</h3>
                             <p>2017-09-20 10:27:08</p>
                             <em></em>
                             <i></i>
                         </div>
                         <div class="list">
                            <h3>货物已到达</h3>
                            <p>2017-09-20 10:27:08</p>
                            <em></em>
                            <i></i>
                         </div>
                         <div class="list">
                             <h3>订单已受理,请等待提货。</h3>
                             <p>2017-09-25 10:27:08</p>
                             <em></em>
                             <i></i>
                         </div>
                         <div class="list">
                            <h3>已提货,货物在途运输中。</h3>
                            <p>2017-09-20 10:27:08</p>
                            <em></em>
                            <i></i>
                         </div>
                         <div class="list">
                             <h3>订单已提交,请等待受理。</h3>
                             <p>2017-09-20 10:27:08</p>
                             <em></em>
                             <i></i>
                         </div>
                     </div>

                </div>
             </div>

 

css部分:
*{margin:0;padding:0}
.msg-box{ overflow-y: auto;min-width: 1110px; margin: 20px 0; padding:20px; box-sizing:border-box; border:1px solid #eee;}
.number-box,.msg-list,.msg-tip{display: inline-block; vertical-align: top;}
.number-box{width: 150px;}
.number-box p{color: #333; font:16px/20px "Microsoft YaHei";vertical-align:middle; }
.number-box p em{display: inline-block; margin-right: 10px; width: 4px; height: 20px; background: #4089fe; vertical-align:middle;}
.number-box ul{margin-top:20px;}
.number-box ul li{margin-top: 10px; padding-left: 10px; box-sizing:border-box; width: 140px; line-height: 32px; background: #f5f5f5; color: #666;font-family: "Microsoft YaHei" ; font-size: 14px; cursor:pointer;}
.number-box ul li:hover{color: #4089fe;}
.number-box ul li.cur{background: #d9e7ff; color: #4089fe;}
.msg-list{position: relative;margin:45px 0 0 50px; width: 540px;}
.msg-tip{position: relative;width: 308px;float: right;}
.list-line{position: relative; margin:0 auto; width: 1px;background: #dcdcdc;}
.list{position: absolute; z-index: 2; padding:10px 20px 5px 20px;background: #f2f2f2; border-radius: 3px;line-height: 24px; font-size: 12px;}
.list p{color: #999;}
.list em{display: inline-block; position: absolute; z-index: 3; }
.list i{display: inline-block; position: absolute; z-index: 6; width: 10px; height: 10px; border:1px solid #f5f5f5; background: #dcdcdc; border-radius: 50%;}
.list:nth-child(2n+1){ top:-30px ;left: -200px;}
.list:nth-child(2n+1) em{top:15px; right:-12px;  border-left: 12px solid #f2f2f2; border-top: 12px solid transparent; border-bottom: 12px solid transparent;}
.list:nth-child(2n+1) i{top:21px; left:194px; }
.list:nth-child(1){background: #d9e7ff !important;}
.list:nth-child(1) em{border-left-color:#d9e7ff !important; }
.list:nth-child(1) i{top:19px !important;left:194px; background: #639efe; border-color:#639efe; }
.list:nth-child(2n){ top:0 ;right: -200px;}
.list:nth-child(2n) em{top:15px; left:-12px;  border-right: 12px solid #f2f2f2; border-top: 12px solid transparent; border-bottom: 12px solid transparent;}
.list:nth-child(2n) i{top:21px; right:194px; }

 

JS部分:
        var list = $(".msg-box .msg-list .list-line .list");
        $(".list-line").height(list.length*75-30);
        for(var i = 0 ; i < list.length ; i++){
            var thsW = parseInt(list.eq(i).css("width"))+80;
            var thsIW = thsW-5;
            if(i % 2 == 1){
              list.eq(i).css({"top":i*70,"right":-thsW});
              list.eq(i).find("i").css("right",thsIW);
            }else{
              list.eq(i).css({"top":i*70,"left":-thsW});
              list.eq(i).find("i").css("left",thsIW);
            }
        }

  

  

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端HTML中float学习笔记

下一篇:css中background-origin属性的使用