帮助中心

完整的JS评论回复留言回复效果

浏览：13869次- 评论：4次- 发布时间：2017-12-07

Html

Css


     X
        
        
            Andy：哈哈哈哈哈
            
            02-14 23:01赞
            2980人觉得很赞
            
                
                    
                    
                        老王：我
                        02-14 22:00 23 取消赞 回复 
                    
                
                
                    
                    
                        我：看哭了留卡号吧
                        02-14 24:00 赞 删除 
                    
                
            
            
                评论…
                
                0/100 
        
    
     X
        
        
            Andy：哈哈哈哈哈谁
            
            02-14 23:01赞
            
            
                
                    
                    
                        我：看哭了留卡号吧
                        02-14 24:00 286 取消赞 删除 
                    
                
            
            
                评论…
                
                0/100

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
address,cite,dfn,em,var {
	font-style:normal;
}
code,kbd,pre,samp {
	font-family:courier new,courier,monospace;
}
ul,ol {
	list-style:none;
}
a {
	text-decoration:none;
}
a:hover,a:visited,a:link,a:active {
	text-decoration:none;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
legend {
	color:#000;
}
fieldset,img {
	border:0;
}
button,input,select,textarea {
	font-size:100%;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
.clear {
	clear:both;
	float:none;
	height:0;
	overflow:hidden;
}
body {
	color:#333;
	font:12px/1.3 'Arial','Microsoft YaHei';
}
#pn {
	width:550px;
	height:auto;
	background:#fff;
	margin:0 auto;
	padding:20px;
}
.list0 {
	padding:20px 0;
	position:relative;
	border-top:1px solid #eee;
}
.head {
	width:60px;
	float:left;
}
.head img {
	width:60px;
	height:60px;
}
.close {
	width:20px;
	height:20px;
	position:absolute;
	top:0;
	right:0;
	color:#696e78;
	font-size:14px;
	text-align:center;
	line-height:20px;
}
.close:hover {
	color:#eb7350;
}
.content {
	width:450px;
	line-height:20px;
	font-size:14px;
	margin-left:70px;
}
.name {
	color:#eb7350;
}
.pic {
	margin:5px 0;
}
.good:after {
	clear:both;
	content:'';
	display:block;
	width:0;
	height:0;
	visibility:hidden;
}
.good {
	*zoom:1;
}
.date {
	float:left;
	color:#808080;
}
.good a {
	float:right;
	color:#808080;
}
.people {
	background:#F7F7F7;
	height:28px;
	line-height:28px;
	padding-left:10px;
	margin:5px 0;
}
.comment:after {
	clear:both;
	content:'';
	display:block;
	width:0;
	height:0;
	visibility:hidden;
}
.comment {
	*zoom:1;
	padding:10px 0;
	border-top:1px solid #eee;
}
.comment-left {
	width:30px;
	float:left;
	display:inline;
	margin-right:10px;
}
.comment-left img {
	width:30px;
	height:30px;
}
.comment-right {
	float:left;
	width:410px;
}
.comment-text {
	line-height:18px;
}
.comment-text span {
	color:#eb7350;
}
.comment-date {
	font-size:12px;
	line-height:14px;
	color:#ccc;
	position:relative;
}
.comment-zan {
	position:absolute;
	right:40px;
	bottom:0;
	color:#808080;
}
.comment-dele {
	position:absolute;
	right:0;
	bottom:0;
	color:#808080;
}
.hf:after {
	clear:both;
	content:'';
	display:block;
	width:0;
	height:0;
	visibility:hidden;
}
.hf {
	*zoom:1;
}
.hf-text {
	border:1px solid #eee;
	display:block;
	height:15px;
	width:438px;
	padding:5px;
	resize:none;
	color:#ccc;
	font-size:12px;
}
.hf-on .hf-text {
	height:60px;
	color:#333;
	border:1px solid #ff8140;
}
.hf-btn {
	float:right;
	width:65px;
	height:26px;
	background:#f7f7f7;
	color:#ccc;
	font-size:12px;
	display:none;
}
.hf-btn-on {
	background:#ff8140;
	color:#fff;
}
.hf-nub {
	float:right;
	padding:3px 5px;
	color:#666;
	display:none;
}
.hf-on .hf-btn {
	display:inline;
}
.hf-on .hf-nub {
	display:inline;
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.1