微客导航 » 文章资讯 » jQuery实现评论模块

jQuery实现评论模块

2023-07-18 13:02:04 200

本文实例为大家分享了jQuery实现评论模块的具体代码，供大家参考，具体内容如下

本模块可用于评论或留言，输入区模仿畅言，内容显示使用时间轴，以下是示例图。

实现代码如下：

index.html








Document

2019-5-15 15:15
支持各种类型的Web网站接入，网站只需要粘贴、复制JS代码到网页

publish_comment.css

*{
margin:0;
padding:0
}

body{
font-size:14px;
font-family:"微软雅黑";
/*background:url("../images/2.jpg")topno-repeat;*/
background:#333333;
background-attachment:fixed;
z-index:0;
background-size:100%;
}

.comment-box{
width:800px;
margin:auto;
margin-top:100px;
}

.input-box{
width:100%;
}

.input-box-head{
position:relative;
width:100%;
height:60px;
z-index:10;
}

.user-photo{
width:40px;
height:40px;
border-radius:42px;
border:1pxsolid#4398ed;
position:absolute;
top:22px;
left:9px;
font-size:14px;
color:#4398ed;
text-align:center;
line-height:42px!important;
font-family:"MicrosoftYaHei";
cursor:pointer;
background:00;
}

.input-box-main{
display:block;
position:relative;
zoom:1;
z-index:2;
}

.box-border-l{
width:8px;
height:97px;
position:absolute;
background:url("../images/border-l.png");
top:0;
left:0;
}

.box-border-r{
width:8px;
height:97px;
position:absolute;
background:url("../images/border-r.png");
top:0;
right:0;
}

.box-main{
margin:08px;
height:96px;
/*background:#fff;*/
border-bottom:1pxsolid#4398ed;
}

.box-top{
width:calc(100%-16px);
height:8px;
background:url(https://changyan.itc.cn/mdevp/extensions/cmt-box/065/images/border-t.png);
overflow:hidden;
position:absolute;
left:8px;
top:0;
}

.input-region{
padding:18px10px0;
}

.input-text-area{
width:100%;
height:70px;
background:00;
overflow-x:hidden;
overflow-y:auto;
border:0;
font-size:13px;
color:#4398ed;
resize:none;
line-height:normal;
text-align:left;
box-shadow:none;
-webkit-box-shadow:none;
outline:none;
border:none;
}

.pub-area{
width:100%;
position:relative;
z-index:12;
}

.pub-btn{
position:absolute;
top:10px;
right:0;
width:102px;
height:30px;
overflow:hidden;
border:0;
padding:0;
margin:0;
cursor:pointer;
background-image:url("../images/post-btn.png");
background-repeat:no-repeat;
background-color:transparent;
}

.show-box{
position:relative;
top:10px;
}

.comment-title{
position:absolute;
top:35px;
left:28px;
width:60px;
height:60px;
line-height:60px;
text-align:center;
font-size:16px;
color:#4398ed;
border:2pxsolid#4398ed;
border-radius:50%;
}

.time-line{
width:60px;
height:0;
position:absolute;
top:100px;
left:0;
border-right:2pxsolid#4398ed;
}

.comment-content{
width:380px;
height:80px;
position:absolute;
top:0px;
left:60px;
}

.comment-content.comment{
width:600px;
height:80px;
/*background:#fff;*/
border:1pxsolid#4398ed;
border-radius:6px;
margin-top:30px;
font-size:16px;
line-height:20px;
color:#4398ed;
word-break:break-all;
position:relative;
left:15px;
padding:10px;
box-sizing:border-box;
}

.c-circle{
width:6px;
height:6px;
border-radius:50%;
border:2pxsolid#4398ed;
background:#4398ed;
position:absolute;
top:35px;
left:-20px;
}

.head-shot{
position:absolute;
top:20px;
left:-70px;
width:40px;
height:40px;
border:1pxsolid#4398ed;
border-radius:50%;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现评论模块

热门推荐

随机推荐