<!DOCTYPE html>
<html>
<head>
<title>JS</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#box{
position:relative;
width:500px;
height:130px;
padding-top:10px;
background-color:#ccc;
margin:50px auto;
border-radius:5px;
}
#box #tx{
display:block;
width:480px;
height:80px;
margin:0px 10px;
border-radius:5px;
resize:none;
}
#box p{
position:relative;
float:left;
width:30px;
height:30px;
margin:10px 10px;
}
#box p img{
display:none;
position:absolute;
width:100%;
height:100%;
border-radius:5px;
cursor:pointer;
}
#box #btn{
float:right;
width:100px;
height:30px;
margin:10px 10px;
background-color:#FF8000;
border-radius:5px;
line-height:30px;
text-align:center;
color:#fff;
font-size:12px;
cursor:pointer;
}
#wor{
width:500px;
margin:0 auto;
}
#wor ul li{
padding:10px 0;
border-bottom:1px solid #d0d0d0;
}
/* #wor li::after{
content:'';
display:block;
clear:both;
}*/
#wor li img{
/*float:left;*/
width:45px;
height:45px;
border-radius:5px;
}
#wor li p{
float:right;
width:450px;
}
</style>
</head>
<body>
<div id='box'>
<textarea id='tx'></textarea>
<p>
<img style="display:block" src="images/1.jpg">
<img src="images/2.jpg">
</p>
<div id='btn'>发表</div>
</div>
<div id='wor'>
<ul>
<!-- <li>
<img src="images/2.jpg">
<p>aaaaaa</p>
</li>
<li>
<img src="images/2.jpg">
<p>aaaaaa</p>
</li>
<li>
<img src="images/2.jpg">
<p>aaaaaa</p>
</li> -->
</ul>
</div>
</body>
<script>
var oBtn = document.getElementById('btn');
var oTx = document.getElementById('tx');
var oIamg = document.querySelectorAll('#box p img');
var oUl = document.querySelector('#wor ul');
var src = oIamg[0].src;//第一张图片路径
oBtn.onclick = function(){
var text = oTx.value;
oUl.innerHTML += '<li><img src="'+src+'"><p>'+text+'</p></li>'
oTx.value = '';
}
oIamg[0].onclick = function(){
this.style.display = 'none';
oIamg[1].style.display = 'block';
src = oIamg[1].src;
}
oIamg[1].onclick = function(){
this.style.display = 'none';
oIamg[0].style.display = 'block';
src = oIamg[0].src;
}
</script>
</html>
