jquery微信对话小案例

abstract-person

于 2023-08-07 20:17:26 发布

阅读量174

点赞数 4

文章标签： jquery 微信 css javascript 开发语言 css3 html5

本文链接：https://blog.csdn.net/m0_74895600/article/details/132153938

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}

		#zhu {
			width: 1000px;
			height: 625px;
			background-color: #aeaeae;
			margin: 0px auto;
		}

		p {
			background-color: skyblue;
			padding: 7px 0px;
		}

		p input[type=text] {
			height: 20px;
			width: 300px;
			margin-left: 20px;
		}

		p input[type=button] {
			height: 24px;
			width: 50px;
			margin-left: 8px;
			padding-bottom: 2px;
		}

		#zuo {
			width: 400px;
			height: 500px;
			float: left;
		}

		#you {
			width: 400px;
			height: 500px;
			float: right;
		}

		.mianban {
			height: 550px;
			background-color: aliceblue;
			overflow: auto;
		}

		.mianban::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 5px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 5px;
		}

		.mianban::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px gray;
			background: gray;
		}

		.mianban::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px #fafafa;
			border-radius: 0;
			background: #ececec;
		}

		.name {
			padding-left: 25px;
		}

		.you {
			max-width: 70%;
			float: right;
			margin: 10px 0px;
			margin-right: 20px;
			background-color: greenyellow;
			padding: 3px;
			border-radius: 5px;
		}

		.zuo {
			max-width: 70%;
			float: left;
			margin: 10px 0px;
			margin-left: 20px;
			background-color: grey;
			padding: 3px;
			border-radius: 5px;
		}

		ul li {
			list-style: none;
		}

		img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}

		.right {
			margin-right: 10px;
			margin-top: 5px;
			float: right;
			clear: both;
		}

		.left {
			margin-left: 10px;
			margin-top: 5px;
			float: left;
			clear: both;
		}
	</style>
	<body>
		<div id="zhu">
			<div id="zuo">
				<p class="name">张三</p>
				<div class="mianban">
					<ul></ul>
				</div>
				<p><input type="text"><input type="button" value="发送" id="zs"></p>
			</div>
			<div id="you">
				<p class="name">李四</p>
				<div class="mianban">
					<ul></ul>
				</div>
				<p><input type="text"><input type="button" value="发送" id="ls"></p>
			</div>
		</div>
	</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script>
		$(function() {
			$("#zs").click(function() {
				let text = $("#zs").prev();
				if ($(text).val().trim().length === 0) {
					return;
				}
				$("ul").append("<li><img src='images/renwu1.jpg'><span></span></li>");
				$("#zuo li:last img").addClass("right")
				$("#you li:last img").addClass("left")
				$("#zuo li:last span").text(text.val()).addClass("you");
				$("#you li:last span").text(text.val()).addClass("zuo");
				$(".mianban").scrollTop($(".mianban").get(0).scrollHeight);
				text.val("");
			});
		})
		$(function() {
			$("#ls").click(function() {
				let text = $("#ls").prev();
				if ($(text).val().trim().length === 0) {
					return;
				}
				$("ul").append("<li><img src='images/renwu4.jpg'><span></span></li>");
				$("#you li:last img").addClass("right")
				$("#zuo li:last img").addClass("left")
				$("#you li:last span").text(text.val()).addClass("you");
				$("#zuo li:last span").text(text.val()).addClass("zuo");
				$(".mianban").scrollTop($(".mianban").get(0).scrollHeight);
				text.val("");
			});
		})
	</script>
</html>