<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<style>
.commentBox{
width:700px;
margin:0 auto;
position:relative;
}
.commentBox .textArea{
width:100%;
min-height: 100px;
border:1px solid #ddd;
padding:5px;
line-height:20px;
word-break: break-all;
}
.commentBox .textArea img{
width:24px;
height: 24px;
vertical-align: bottom;
}
.faceIcon{
margin:10px;
display: block;
width:24px;
height: 24px;
background: url("头像.png") no-repeat;
background-size: 100%;
}
.commentBox .faceBox{
position:absolute;
width:410px;
height:250px;
padding:10px 5px;
border:1px solid #ddd;
display: none;
background-color: #fff;
}
.commentBox .faceBox img{
width:24px;
height:24px;
}
</style>
</head>
<body>
<div class="commentBox">
<div class="textArea" contenteditable="true"></div>
<span class="faceIcon">点击选表情</span>
<div class="faceBox"></div>
</div>
<script>
$(function(){
for(var i=0;i<120;i++){
var imgNum="";
if(i<10){
imgNum="00"+i;
}else if(i>=10&&i<100){
imgNum="0"+i;
}else{
imgNum=i;
}
$('<img>').attr('src','123/f_static_'+imgNum+'.png').appendTo($(".faceBox"));
}
$(".faceIcon").on("click",function(){
$(this).parent().find(".faceBox").toggle();
});
$(".faceBox").on("click","img",function(){
$(this).parents(".commentBox").find(".textArea").append($(this).clone());
$(this).parent().hide();
});
})
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消