JavaScript做了个类似于手机通信的东西
长这样…
旁边的滑动栏是超过这个空间才会出现的，在聊天内容没有超过空间时不会出现那个滑动栏
emmmmmmm虽然没什么屌用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1{
background-image: url(../img/phone.png);
background-size: 100% 100%;
border: 1px solid white;
width: 30%;
height: 970px;
margin: 0 auto;
}
#d2{
width: 69%;
background-color: lightgrey;
margin-left: 15%;
border: 0px solid black;
height: 675px;
margin-top: 135px;
margin-bottom: 10px;
OVERFLOW-Y: auto;
OVERFLOW-X:hidden;
text-align: center;
}
#d3{
width: 70%;
margin: 0px auto;
padding: ;
}
.input1{
height: 50px;
}
#img1{
border: 1px solid black;
width: 50px;
border-radius:50px;
float: right;
text-align: right;
}
#img2{
border: 1px solid black;
width: 50px;
border-radius:50px;
float: left;
text-align: left;
}
#p1{
background-color: yellowgreen;
float: right;
text-align: right;
border: 0px solid black;
border-radius: 7px;
width: 37%;
margin-right: 20px;
padding: 5px;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
}
#p2{
background-color: white;
float: left;
text-align: left;
border: 0px solid black;
border-radius: 7px;
width: 37%;
margin-left: 20px;
padding: 5px;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
}
#sf{
width: 75px;
height: 60px;
border-radius:20px;
background-size: 100% 100%;
background-image: url(../img/111.jpg);
}
#fs{
border: 2px solid yellowgreen;
border-radius:10px;
background-color: forestgreen;
color: white;
}
#divEle1{
text-align: right;
}
#divEle2{
text-align: left;
}
.clear{ clear:both;}
</style>
<script type="text/javascript">
var a = true;
function fasong(){
var mes = document.getElementById("mes").value;
//获取id为d2的div节点
var div2 = document.getElementById("d2");
//创建一个P节点
var pEle = document.createElement("p");
//给p节点赋值
pEle.innerHTML = mes;
//new一个图片
var img = new Image();
//new一个div
var divEle = document.createElement("div");
if(a){
pEle.id = "p1";
img.id = "img1";
img.src="../img/111.jpg";
divEle.id = "divEle1";
}else{
pEle.id = "p2";
img.id = "img2";
img.src="../img/222.jpg";
divEle.id = "divEle2";
}
//把图片放进新建的div里
divEle.appendChild(img);
//把p标签放到新建的div里
divEle.appendChild(pEle);
//再把div放进已有的div里
div2.appendChild(divEle);
//new一个用来清除浮动的DIV
var clearDiv = document.createElement("div");
clearDiv.className="clear";
div2.appendChild(clearDiv);
}
function bianhuan(imm){
if(a){
imm.style.backgroundImage="url(../img/222.jpg)";
}else{
imm.style.backgroundImage="url(../img/111.jpg)";
}
a = !a;
}
</script>
</head>
<body>
<div id="d1">
<div id="d2">
</div>
<!----------------------------------------------------------------------------->
<div id="d3">
<table width="100%" align="center">
<tr>
<td><input id="sf" type="button" onclick="bianhuan(this)"/></td>
<td width="500px"><input id="mes" class="input1" style="width: 250px;"/></td>
<td><input id="fs" class="input1" type="button" value="发送" onclick="fasong()"/></td>
</tr>
</table>
</div>
</div>
</body>
</html>
最主要是js那两个方法。创建对象啊，获得属性啊，设置属性啊，赋值啊啥的。
但也不算难
