jQuery响应式聊天窗口界面
1、新建html文档。
3、书写hmtl代艨位雅剖码。<div class="chatContainer"> <div class="chatBtn"> <i class="iconfont icon-xiaoxi1"></i> </div> <div class="chat-message-num">10</div> <div class="chatBox" ref="chatBox"> <div class="chatBox-head"> <div class="chatBox-head-one"> Conversations <div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div> </div> <div class="chatBox-head-two"> <div class="chat-return">返回</div> <div class="chat-people"> <div class="ChatInfoHead"> <img src="" alt="头像"> </div> <div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div> </div> <div class="chat-close">关闭</div> </div> </div> <div class="chatBox-info"> <div class="chatBox-list" ref="chatBoxlist"> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>自酌一杯酒</p> </div> <div class="message-num">10</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>白兰地</p> </div> <div class="message-num">8</div> </div> <div class="chat-list-people"> <div><img src="img/icon03.png" alt="头像"></div> <div class="chat-name"> <p>威士忌</p> </div> <div class="message-num">2</div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>荷兰金酒</p> </div> <div class="message-num">20</div> </div> <div class="chat-list-people"> <div><img src="img/icon03.png" alt="头像"></div> <div class="chat-name"> <p>朗姆酒</p> </div> <div class="message-num">10</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>特其拉酒</p> </div> <div class="message-num">18</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>鸡尾酒</p> </div> <div class="message-num">9</div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>虎骨酒</p> </div> <div class="message-num">12</div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>琴酒</p> </div> <div class="message-num">99+</div> </div> <div class="chat-list-people"> <div><img src="img/icon02.png" alt="头像"></div> <div class="chat-name"> <p>葡萄酒</p> </div> <div class="message-num"></div> </div> <div class="chat-list-people"> <div><img src="img/icon01.png" alt="头像"></div> <div class="chat-name"> <p>蓝莓酒</p> </div> <div class="message-num"></div> </div> <div class="chat-list-people"> <div><img src="img/icon03.png" alt="头像"></div> <div class="chat-name"> <p>樱花酒</p> </div> <div class="message-num"></div> </div> </div> <div class="chatBox-kuang" ref="chatBoxkuang"> <div class="chatBox-content"> <div class="chatBox-content-demo" id="chatBox-content-demo"> <div class="clearfloat"> <div class="author-name"> <small class="chat-date">2017-12-02 14:26:58</small> </div> <div class="left"> <div class="chat-avatars"><img src="img/icon01.png" alt="头像"></div> <div class="chat-message"> 给你看张图 </div> </div> </div> <div class="clearfloat"> <div class="author-name"> <small class="chat-date">2017-12-02 14:26:58</small> </div> <div class="left"> <div class="chat-avatars"><img src="img/icon01.png" alt="头像"></div> <div class="chat-message"> <img src="img/1.png" alt=""> </div> </div> </div> <div class="clearfloat"> <div class="author-name"> <small class="chat-date">2017-12-02 14:26:58</small> </div> <div class="right"> <div class="chat-message">嗯，适合做壁纸</div> <div class="chat-avatars"><img src="img/icon02.png" alt="头像"></div> </div> </div> </div> </div> <div class="chatBox-send"> <div class="div-textarea" contenteditable="true"></div> <div> <button id="chat-biaoqing" class="btn-default-styles"> <i class="iconfont icon-biaoqing"></i> </button> <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles"> <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png" name="file" id="inputImage" class="hidden"> <i class="iconfont icon-tuxiang"></i> </label> <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i> </button> </div> </div> </div> </div> </div></div>
5、书写并添加js代码。<script src="js/jquery.min.js"></script><script> screenFuc(); function screenFuc() { var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度 //屏幕小于768px时候,布局change var winWidth = $(window).innerWidth(); if (winWidth <= 768) { var totalHeight = $(window).height(); //页面整体高度 $(".chatBox-info").css("height", totalHeight - topHeight); var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度 //中间内容高度 $(".chatBox-content").css("height", infoHeight - 46); $(".chatBox-content-demo").css("height", infoHeight - 46); $(".chatBox-list").css("height", totalHeight - topHeight); $(".chatBox-kuang").css("height", totalHeight - topHeight); $(".div-textarea").css("width", winWidth - 106); } else { $(".chatBox-info").css("height", 495); $(".chatBox-content").css("height", 448); $(".chatBox-content-demo").css("height", 448); $(".chatBox-list").css("height", 495); $(".chatBox-kuang").css("height", 495); $(".div-textarea").css("width", 260);</script>
7、查看效果。
