<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
#btn{
width: 60px;
height:30px;
line-height: 30px;
color: white;
text-align: center;
background:pink;
}
.box{
height: 200px;
margin:0 auto;
width: 227px;
}
.items{
margin:0 auto;
width: 227px;
height: 200px;
overflow: auto;
border: 1px solid black;
position: relative;
}
ul li{
list-style: none;
content: "";
clear: both;
height: 45px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class="items .clearfix" id= "small_box">
</ul>
<div style="position: relative;display: inline-block;left:44%;">
<textarea name="" id="wy" cols="30" rows="10"></textarea>
<button id="btn" style="position: absolute;right: 0px;bottom: 5px;">发送</button>
</div>
</body>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
function boxScroll(o){
o.scrollTop = o.scrollHeight;
console.log(o.scrollTop)
}
$("#btn").click(function(){
var textwb = $("#wy").val();//获得多行文本框的值
var Lis = $("<li></li>");
Lis.css({"display":"inline-block"});
var ch = $(".items").append(Lis);
var igg = $('<img src="" alt="" class="iii"/>');
var img = Lis.append(igg);//插入图片
var arr = ['image/f1.jpg','image/f2.jpg','image/f3.jpg','image/f4.jpg'];//保存图片数组
var brr = ["小可爱","么么哒","亲爱的","默默踹"];
var lucky = Math.round(Math.random() * 3);//随机数
igg.attr({src:arr[lucky]});//为图片设置路径
igg.css({"width":"40px","height":"40px","float":"left"});
var rightdiv = $('<div class="he"></div>');//创建图片右边盒子
Lis.append(rightdiv);//插入图片右边的盒子
rightdiv.css({"display":"inline-block","float":"left"});//设置为行内快元素
var pp = $('<p class="ji"></p>');//创建一个p标签
pp.css({"color":"blue"});
rightdiv.append(pp);//插入右边盒子的p
pp.html(brr[lucky]);//插入昵称
var ku = $("<p class='ps'></p>");//创建右边盒子昵称下的盒子
$(".he").append(ku);
ku.css({"width":"150px","border-radius":"10%","background":"gray"});
ku.html(textwb);
$("#wy").val("");//最后文本框内容清空
boxScroll(small_box)
});
</script>
</html>
用jQuery模仿写qq对话框
猜你喜欢
转载自blog.csdn.net/ASLlife/article/details/89385883
今日推荐
周排行