用jQuery模仿写qq对话框

最新推荐文章于 2022-09-16 17:38:39 发布

原创最新推荐文章于 2022-09-16 17:38:39 发布 · 600 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何利用jQuery库来创建一个类似QQ聊天对话框的效果，包括对话框的弹出、关闭、动态显示消息等功能。通过实例代码，帮助读者理解jQuery在动态交互界面设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>