jquery实现手机端移动端聊天窗口效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现手机端移动端聊天窗口效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style> h5 { margin:0 } img { max-width:100%; vertical-align:middle } input { outline:0 } body { max-width:720px; margin:0 auto; background:#f1f1f1; color:#333; font-size:.26rem } .header { border-bottom:1px solid #dfdfdf; padding:0 .2rem; height:1rem; line-height:1rem; background:#fff; position:fixed; width:100%; max-width:720px; box-sizing:border-box; z-index:100 } .back { position:absolute; top:0; left:.3rem; background:url(../images/left.png) no-repeat; width:.2rem; height:.4rem; margin-top:.34rem; background-size:.2rem .4rem } .header .tit { font-size:.32rem; vertical-align:middle; text-align:center; height:1rem; line-height:1rem; font-weight:400 } .header .right { position:absolute; right:.3rem; top:0; float:none; font-size:.3rem; line-height:1.2rem } #message { background-color:#f1f1f1; padding:1.2rem .3rem 1rem } .time { font-size:.24rem; color:#999; margin-bottom:.3rem; text-align:center } #footer { position:fixed; bottom:0; height:1rem; background-color:#fff; line-height:1rem; width:100%; max-width:720px; border-top:1px solid #ddd } #footer img { margin-left:.2rem; width:.5rem } #footer input { margin-left:.2rem; width:3.5rem; height:.64rem; border-radius:.1rem; border:.01rem solid #ddd; padding:0 .15rem } #footer p { width:1.2rem; height:.68rem; font-size:.3rem; color:#fff; line-height:.68rem; text-align:center; background-color:#ddd; border-radius:.1rem; float:right; margin-top:.2rem; margin-right:.2rem } .reply:after,.ask:after,.msg:after { content:""; clear:both; display:table } .msg { position:relative } .reply .msg .name { position:absolute; font-size:.24rem; color:#999; top:-.1rem; left:.9rem } .msg>img { width:.8rem; float:left } .reply .msg>p { top:.3rem } .msg>p { float:left; margin:0 .4rem; padding:.25rem; background:#fff; font-size:.3rem; position:relative; border-radius:.2rem; max-width:5rem; min-height:.8rem; box-sizing:border-box; word-wrap:break-word } .msg_input { position:absolute; background:url(../images/msg-input.png) no-repeat; background-size:.31rem auto; width:.31rem; height:.51rem; left:-.31rem; top:.25rem } .ask .msg img,.ask .msg p,.ask .msg { float:right } .ask .msg_input { left:auto; right:-.11rem; transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg) } .reply,.ask { padding-bottom:.7rem } .alert_novip,.flower_num,.give_flower { display:none; padding:.3rem .5rem; font-size:.28rem } .alert_novip p,.flower_num p { margin-bottom:.45rem } .layui-layer-wrap button { font-size:.28rem; padding:.2rem .3rem; margin-top:.1rem; background:#f8f8f8; border-radius:10px } .flower_num button { padding:.2rem .5rem; border-radius:10px } .layui-layer-wrap button:first-child { float:left } .layui-layer-wrap button:last-child { float:right; background:#ff7171; color:#fff } .alert_novip button { padding:.2rem .3rem; border-radius:10px } .flower { width:.8rem; margin:0 auto } .give_flower { text-align:center } .give_flower p { text-align:center; line-height:1.5 } .give_flower input { width:1rem; margin-right:.1rem; margin-top:.2rem } .give_flower button { display:block; width:3rem; font-size:.28rem; margin:0 auto; margin-top:.6rem; float:none!important; line-height:.65rem; border-radius:10px } .msg img { border-radius:100px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script> </head> <body> <header class="header"> <a class="back" href="javascript:hist.........完整代码请登录后点击上方下载按钮下载查看
网友评论0