需要实现类似聊天的功能,找了半天没找到满意的,只好手动用最笨的方式通过在
纯纯的无
<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>其中作为添加第一个
增加节点的js代码
[toggle hide=“yes” title=“增加节点的js代码” color=""]
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="https://windcoder.com/+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="https://windcoder.com/+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);
}[/toggle] 每一个新节点
- 中的第一个
- )的id为”xinxi1”. html节点格式为
<li id="xinxi1" class="neirong_zili "><img class="touimg" src="https://windcoder.com/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;}[caption id="" align=“aligncenter” width=“319”]
项目实例截图[/caption]
评论