需要實現類似聊天的功能,找了半天沒找到滿意的,只好手動用最笨的方式通過在<ul></ul>中添加<li>相關節點實現。此處代碼僅作爲實現思路,若是照搬不保證最終實現樣式。
純純的無<li>時的代碼
<div id="xiaoxi" style="font-size: 30px;position: absolute;z-index:8;width: 100%;"> <ul id="ChatContent"> <span id="chushi"></span> </ul> <div style="height: 100px"></div> </div>
其中<span id="chushi"></span>作爲添加第一個<li>節點時的參照。
增加節點的js代碼
增加節點的js代碼
function chuanruwenzi(){ if($("#wenzi").val().length>0){ inum = document.getElementById("ChatContent").getElementsByTagName("li").length;//現節點長度 if(inum==0) { snum =inum+1; var xin= "#xinxi"+snum; var xinnew = "xinxi"+snum; var xinnews = "#xinxi"+snum; var neinew = "neirong"+snum; //增加新節點 $("#chushi").after("<li id='"+xinnew+"'class='neirong_zili'><img class='touimg' src="+img+"><span id='"+neinew+"' class='neirong'>"+$("#wenzi").val()+"</span></br></li>"); var s = document.getElementById(neinew).offsetHeight-90; $(xinnews).css("padding-bottom",s); //清空輸入框 var textarea=document.getElementById("wenzi"); textarea.value=" "; }else { snum =inum+1; var xin= "#xinxi"+inum; var xinnew = "xinxi"+snum; var xinnews = "#xinxi"+snum; var nei = "neirong"+inum; var neinew = "neirong"+snum; //增加新節點 $(xin).after("<li id='"+xinnew+"'class='neirong_zili'><img class='touimg' src="+img+"><span id='"+neinew+"' class='neirong'>"+$("#wenzi").val()+"</span></br></li>"); var s = document.getElementById(neinew).offsetHeight-90; $(xinnews).css("padding-bottom",s); //清空輸入框 var textarea=document.getElementById("wenzi"); textarea.value=" "; } } window.scrollTo(0,document.body.scrollHeight); }
每一個新節點<li>的id爲"xinxi+節點號",如一號節點(即<ul>中的第一個<li>)的id爲"xinxi1".
html節點格式爲
<li id="xinxi1" class="neirong_zili "><img class="touimg" src="img/ceshi/tou.jpg"><span id="neirong1" class="neirong">文本</span></li>
部分css樣式
.none {display: none;} /*背景*/ .bg {width: 100%;height: 100%;top: 0;position: absolute;} /*居中*/ .center {position: absolute;left: 0;right: 0;margin: auto;z-index: 8;} .touimg{width: 15%;border-radius:40px;} .neirong{width: 46%;position: absolute;padding-left: 2%;background-color: #B1E766;padding: 10px;margin-left: 15px;border-radius:20px;min-height: 65px} .neirong_zili{position: relative;padding-bottom: 3%;} .neirong_imgli{position: relative;padding-bottom: 27%;} .neirong_img{width: 46%;position: absolute;padding-left: 2%;height: auto;} li{list-style-type: none;}
項目實例截圖