发表评论动态样式实现——便签贴纸

最新推荐文章于 2022-05-19 19:31:16 发布

岁月婧好

最新推荐文章于 2022-05-19 19:31:16 发布

阅读量699

点赞数

分类专栏： web前端开发文章标签：动画 animation jquery

本文链接：https://blog.csdn.net/u014716259/article/details/44301981

版权

web前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

想做一个发表评论的页面，但同时又不希望想贴吧或者其他发表评论的结构和布局。于是就采用了jQuery的动画，将评论发布的过程拟物化了。

下面是示意图：

（写评论）

（发表评论——会动态的随机将新的评论贴到展板上，可以覆盖掉原来的评论）

先看布局：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="Emily">
  <link rel="stylesheet" href="commentStyle.css"/>
  <script src="jquery-1.11.1.js"></script>
  <script src="commentFunction.js"></script>
  <title>发表评论</title>
 </head>
 <body>
	<div class="container">
		<div class="showBox">
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
			<li><div class="item">
				<p class="titleShow">title</p>
				<div class="contentShow">content</p>
			</div></li>
		</div>

		<div class="comment">
			<div class="titleBox">
				<input class="title" type="text" value="title"/>
			</div>
			<div class="contentBox">
				<textarea class="content">content</textarea>
			</div>
		</div>
		<div class="commentbg">
			<p class="bgTitle">title</p>
			<p class="bgContent">content</p>
		</div>
		<button class="submit" type="button">发表评论</button>
	</div>
  
 </body>
</html>

需要注意的地方：用户写评论的那张大的便签在评论发表的过程中是要通过animation动画移走的，如果只有那一个div.comment，在发表的动态过程中原始的区域就会出现空白。所以给这个div加上了一个背景div.commnetbg，为了给人一种便签本有很多页的感觉。

然后是样式文件，这里就不多解释了：

.container {width:70%; height:650px; margin-left:auto; margin-right:auto; background:#efefef; border-radius:10px; padding:10px; font-family:"Î¢ÈíÑÅºÚ", "Microsoft Yahei";}
.container .showBox {width:570px; height:600px; background:white; border-radius:10px; float:left; padding:20px;}
.container .showBox ul {list-style:none; display:inline; width:0px; height:0px;}
.container .showBox li {list-style:none; display:inline; float:left; width:100px; height:150px; background:white; box-shadow: 0px 0px 10px black; margin:15px; padding:5px;}
.container .showBox .item {width:90px; height:140px; background:white; padding:5px;}
.container .showBox .item .titleShow {margin:0px; padding:5px; height:12%; font-size:15px; font-weight:bold;}
.container .showBox .item .contentShow {margin:0px; padding:5px; width:80px; height:78%; font-size:12px; word-break:break-all; overflow:hide;}
.container .comment {width:200px; height:300px; background:white; box-shadow: 0px 0px 5px black; float:left; position:relative; left:60px; top:120px; z-index:2;}
.container .comment .titleBox {margin:10px; padding:0px 15px; height:12%; font-size:28px; font-weight:bold;}
.container .comment .titleBox .title {border:none; font-size:25px; font-weight:bold; width:100%; }
.container .comment .contentBox {margin:10px; padding:0px 15px; height:78%; font-size:20px;}
.container .comment .contentBox .content {border:none; font-size:20px; width:100%; height:100%; overflow:hide;}
.container .submit { position:absolute; left:935px; top:460px;}
.container .commentbg {width:200px; height:300px; background:white; box-shadow: 0px 0px 5px black; float:left; position:absolute; left:878px; top:138px; z-index:1;}
.container .commentbg .bgTitle {margin:15px 25px 10px 25px; font-size:25px; font-weight:bold; width:100%; }
.container .commentbg .bgContent {margin:0px 25px; font-size:18px; font-weight:normal;}

最重要的是动态过程的实现：

$(document).ready(function(){
	var title;
	var content;
	$(".title").change(function(){
		title = $(this).val();
	});
	$(".content").change(function(){
		content = $(this).val();
	});
	$("button.submit").on("click",function(){
		var itemBox = $("li");
		var i = Math.floor(Math.random()*12);
		var n = i % 4;
		var m = Math.floor(i/4);
		//alert(i+" "+m);
		var stepX = 140;
		var stepY = 190;
		var x = n*stepX - 575;
		var y = m*stepY + 35;
		//动画
		$(".comment").animate({
			left:x,
			top:y,
			width:'110px',
			height:'160px',
		},2000,function(){
			$(".comment").fadeOut(500);

			//修改文字
			$(itemBox[i]).find(".titleShow").text(title);
			$(itemBox[i]).find(".contentShow").text(content);
			
			/*$(".comment").find("div").fadeOut(500);
			$(".comment").find("div").animate({
				margin:'10px',
				padding:'0px 15px',
			},0,function(){
				$(this).fadeIn(100);
			});
			$(".title").fadeOut(500);
			$(".title").animate({
				fontSize:'25px',
			},0,function(){
				$(this).fadeIn(100);
			});
			$(".content").fadeOut(500);
			$(".content").animate({
				fontSize:'20px',
				height:'78%'
			},0,function(){
				$(this).fadeIn(100);
			});*/
			$(".comment").animate({
				left:'60px',
				top:'120px',
				width:'200px',
				height:'300px',
			},0,function(){
				//恢复原样
				$(".title").val("title");
				$(".content").val("content");
				
				$(".comment").find("div").hide(1);
				$(".comment").find("div").animate({
					margin:'10px',
					padding:'0px 15px',
				},0,function(){
					$(this).show(100);
				});
				$(".title").hide(1);
				$(".title").animate({
					fontSize:'25px',
				},0,function(){
					$(this).show(100);
				});
				$(".content").hide(1);
				$(".content").animate({
					fontSize:'20px',
					height:'78%'
				},0,function(){
					$(this).show(100);
				});

				//显示
				$(".comment").fadeIn(100);

			});
		});
		$(".comment").find("div").animate({
			margin:'0px',
			padding:'10px'
		},2000);
		$(".title").animate({
			fontSize:'15px',
		},2000);
		$(".content").animate({
			fontSize:'12px',
			height:'75%',
		},2000);

	});
})

实现思路是：点击发表评论的按钮后，先随机生成一个0-11的数字（为了决定最终评论的便签会贴在哪一块）

var i = Math.floor(Math.random()*12);

然后根据位置计算动画的路径，也就是起点和终点。在动态的变化同时改变便签的大小比例:

left:x,
top:y,
width:'110px',
height:'160px',

<pre name="code" class="javascript">var n = i % 4;
var m = Math.floor(i/4);
var stepX = 140;
var stepY = 190;
var x = n*stepX - 575;
var y = m*stepY + 35;

到达指定位置后，将评论内容赋值给展板，然后隐藏便签。

隐藏便签是为了掩盖掉便签返回原始位置的动态。因为便签最后是会回到评论区以便下一条评论。（PS：其实也可以在到达指定位置后删除便签，然后在原有评论区再生成一个新的便签。）

最后，附上源码的下载地址：git@code.csdn.net:u014716259/comment_animation.git