<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background: #3FC;
}
#qq {
width: 600px;
/*宽*/
height: 170px;
/*高*/
background: #fff;
/*背景颜色*/
margin: 50px auto 30px;
border-radius: 5px;
/*Html5 圆角*/
}
#qq p {
font-size: 12px;
color: #666;
font-family: "微软雅黑";
line-height: 45px;
text-indent: 20px;
}
#qq .message {
width: 560px;
height: 70px;
margin: 0px auto;
outline: none;
border: 1px solid #ddd;
/*粗细 风格 颜色*/
}
#qq .But {
width: 560px;
height: 35px;
margin: 15px auto 0px;
position: relative;
/*相对，参考对象*/
}
#qq .But img.bq {
float: left;
cursor: pointer;
/*左浮动*/
}
#qq .But span.submit {
width: 80px;
height: 30px;
background: #ff8140;
display: block;
float: right;
/*右浮动*/
line-height: 30px;
border-radius: 5px;
cursor: pointer;
/*手指*/
color: #fff;
font-size: 12px;
text-align: center;
font-family: "微软雅黑";
}
/*face begin*/
#qq .But .face {
width: 390px;
height: 160px;
background: #fff;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px #666;
position: absolute;
/*绝对定位*/
top: 21px;
left: 15px;
display: none;
/*隐藏*/
}
#qq .But .face ul li {
width: 22px;
height: 22px;
list-style-type: none;
/*去掉圆点*/
float: left;
margin: 2px;
cursor: pointer;
}
/*msgCon begin*/
.msgCon {
width: 600px;
height: 500px;
margin: 0px auto;
}
.msgCon .msgBox {
background: #fff;
padding: 10px;
margin-top: 20px;
}
.msgCon .msgBox dl {
height: 60px;
border-bottom: 1px dotted #ddd;
}
.msgCon .msgBox dl dt {
width: 50px;
height: 50px;
float: left;
}
.msgCon .msgBox dl dt img {
border-radius: 25px;
}
.msgCon .msgBox dl dd {
width: 500px;
height: 50px;
line-height: 50px;
float: right;
font-size: 16px;
font-family: "微软雅黑";
}
.msgCon .msgBox .msgTxt {
font-size: 12px;
color: #666;
line-height: 30px;
margin-top: 30px;
}
.time1 {
margin-left: 350px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="qq">
<p>有什么新鲜事想告诉大家?</p>
<div class="message" style="margin-left: 10px;" contenteditable="true"></div>
<div class="But">
<img src="img/9.jpg" class='bq' width="22" />
<span class='submit'>发表</span>
<!--face begin-->
<div class="face">
<ul>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
</ul>
</div>
<!--face end-->
</div>
</div>
<!--qq end-->
<!--msgCon begin-->
<div class="msgCon">
<!--<div class='msgBox'>
<dl><dt><img src='img/tx.jpg'/></dt><dd>浮云</dd></dl>
<div class='msgTxt'>"+txt+"</div>
</div>-->
</div>
</body>
</html>
<script type="text/javascript">
/*
点击标签图片 显示所有表情 如果点击浏览器其它部分 隐藏所有标签 如果点击某个表情，该表情添加到文本框中
其余都是dom操作
*/
//点击表情图片 动画实现所有表情的显示和隐藏
$(".bq").click(function() {
$(".face").slideDown(1000);
return false;
})
//点击文档 隐藏表情
$(document).click(function() {
$(".face").slideUp(1000);
})
//点击某个表情 克隆该表情 添加到 div中
$(".face li").click(function() {
$(this).find("img").clone().appendTo(".message");
})
//发表内容
$(".submit").click(function() {
var txt = $(".message").html();
$(".msgCon").prepend(`<div class='msgBox'>
<dl><dt><img src='img/tx.jpg'/></dt><dd>浮云</dd></dl>
<div class='msgTxt'>${txt}</div>
</div>`);
$(".msgBox:first").append(`<div class="time1">${new Date().toLocaleString()}</div>`);
})
</script>
