左右显示的气泡信息布局
2018-06-24 02:20:17来源:未知 阅读 ()
左右气泡信息,这种展示效果用代码写并不难,但是我觉得这种布局很有意思,所以就记录下来了~~
效果图:
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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- title 换行显示 2020-05-14
- 安装了https ssl证书,但浏览器显示并非完全安全(此页面内 2020-05-12
- 点击按钮下滑显示组件 2020-05-01
- CSS文本超出自动隐藏显示省略号 2020-04-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash