jQuery带表情仿多说留言评论框代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带表情仿多说留言评论框代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link  rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/sinaFaceAndEffec.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title>jQuery带表情仿多说留言评论框代码</title>
</head>
<body>
<div id="content" style="width: 700px; height: auto;margin-left:320px;margin-top:40px">
	<div class="wrap">
		<div class="comment">
			<div class="head-face">
				<img src="images/1.jpg" / >
				<p>我是鸟</p>
			</div>
			<div class="content">
				<div class="cont-box">
					<textarea class="text" placeholder="请输入..."></textarea>
				</div>
				<div class="tools-box">
					<div class="operator-box-btn"><span class="face-icon"  >☺</span><span class="img-icon">▧</span></div>
					<div class="submit-btn"><input type="button" onClick="out()"value="提交评论" /></div>
				</div>
			</div>
		</div>
		<div id="info-show">
			<ul></ul>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/sinaFaceAndEffec.js"></script>
<script type="text/javascript">
	// 绑定表情
	$('.face-icon').SinaEmotion($('.text'));
	// 测试本地解析
	function out() {
		var inputText = $('.text').val();
		$('#info-show ul').append(reply(AnalyticEmotion(inputText)));
	}
	
	var html;
	function reply(content){
		html  = '<li>';
		html += '<div class="head-face">';
		html += '<img src="images/1.jpg" / >';
		html += '</div>';
		html += '<div class="reply-cont">';
		html += '<p class="username">小小红色飞机</p>';
		html += '<p class="comment-body">'+content+'</p>';
		html += '<p class="comment-footer">2016年10月5日　回复　点赞54　转发12</p>';
		html += '</div>';
		html += '</li>';
		return html;
	}
</script>
</html>

JS代码(main.js):

(function($){
	$.fn.extend({
	insertContent:function(myValue,t){
	var $t = $(this)[0];
	if (document.selection){
	//ie this.focus();
	var sel = document.selection.createRange();
	sel.text = myValue;
	this.focus();
	sel.moveStart('character',-l);
	var wee = sel.text.length;
	if (arguments.length == 2){
	var l = $t.value.length;
	sel.moveEnd("character",wee + t);
	t <= 0 ? sel.moveStart("character",wee - 2 * t - myValue.length):sel.moveStart("character",wee - t - myValue.length);
	sel.select();
}
}
else if ($t.selectionStart || $t.selectionStart == '0'){
	var startPos = $t.selectionStart;
	var endPos = $t.selectionEnd;
	var scrollTop = $t.scrollTop;
	$t.value = $t.value.substring(0,startPos) + myValue + $t.value.substring(endPos,$t.value.length);
	this.focus();
	$t.selectionStart = startPos + myValue.length;
	$t.selectionEnd = startPos + myValue.length;
	$t.scrollTop = scrollTop;
	if (arguments.length == 2){
	$t.setSelectionRange(startPos - t,$t.selectionEnd + t);
	this.focus();
}
}
else{
	this.value += myValue;
	this.focus();
}
}
}
)}
)(jQuery);
	$(document).ready(function(){
	$(".img-icon").click(function(){
	$(".cont-box .text").insertContent('<img src="请在这里输入图片地址" alt=""/>',-10);
}
);
}
);

CSS代码(main.css):

p,ul,li{margin:0;padding:0;list-style:none;}
/* 评论框 */
.comment{width:100%;height:auto;}
.comment .head-face{width:10%;height:120px;float:left;text-align:center;}
.comment .head-face img{width:50px;height:50px;border-radius:50%;}
.comment .head-face p{font-size:12px;font-family:"微软雅黑";}
.comment .content{width:90%;height:120px;float:right;}
.cont-box{width:100%;height:80px;border:1px solid #99cc66;border-top-left-radius:5px;border-top-right-radius:5px;float:left;}
.cont-box .text{width:96.6%;height:86.9%;border-radius:5px;padding:5px 10px;color:#999;font-family:"微软雅黑";font-size:12px;resize:none;border:none;outline:none;float:left;}
.tools-box{width:100%;height:30px;border:1px solid #99cc66;margin-top:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;float:left;}
.tools-box .operator-box-btn{width:85%;height:30px;float:left;}
.tools-box .operator-box-btn .face-icon{display:block;float:left;margin-top:-1px;margin-left:10px;font-family:"微软雅黑";font-size:22px;color:#99cc66;cursor:pointer;}
.tools-box .operator-box-btn .img-icon{display:block;float:left;margin-top:-11px;margin-left:10px;font-family:"微软雅黑";font-size:33px;font-weight:lighter;color:#99cc66;cursor:pointer;}
.tools-box .submit-btn{width:15%;height:30px;float:right;}
.tools-box .submit-btn input{width:100%;height:100%;font-family:"微软雅黑";font-size:14px;color:#fff;cursor:pointer;border:none;outline:none;background-color:#99cc66;}
/* 回复信息 */
#info-show{float:left;width:100%;margin-top:20px;}
#info-show li{width:100%;height:auto;padding:10px 0 20px 0;border-bottom:1px dashed #c0c0c0;float:left;}
#info-show .head-face{width:10%;float:left;text-align:center;}
#info-show .head-face img{width:50px;height:50px;border-radius:50%;box-shadow:0 0 8px #c0c0c0;}
#info-show .reply-cont{width:89%;padding-right:1%;float:right;}
#info-show .reply-cont p{min-height:20px;line-height:20px;font-family:"微软雅黑";font-size:14px;}
#info-show .reply-cont .username{color:#99cc66;margin-bottom:5px;}
#info-show .reply-cont .comment-body{color:#999;max-height:auto;}
#info-show .reply-cont .comment-footer{font-size:12px;color:#c0c0c0;margin-top:10px;}

附件:下载该文件资源,减少时间成本(增值服务)