欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

左右显示的气泡信息布局

程序员文章站 2022-03-28 18:50:08
左右气泡信息,这种展示效果用代码写并不难,但是我觉得这种布局很有意思,所以就记录下来了~~ 效果图: ......

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

效果图:

左右显示的气泡信息布局

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);
            }
        }