仿微信聊天面板制作 javascript
，
点击头像更换说话对象，简单说下实现原理，html中创建一个ul用于存放所有说话的内容，对话内容是有javascript 动态生成，
主要难点：先布局好css，当时奥巴马发送时候，让这个li有浮动，当是小胖时候，让这个li左浮动。
代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>模拟短信发送</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 font-family: '微软雅黑'
12 }
13 #container {
14 450px;
15 height: 780px;
16 background: #eee;
17 margin: 80px auto 0;
18 position: relative;
19 box-shadow: 20px 20px 55px #777;
20 }
21 .header {
22 background: #000;
23 height: 34px;
24 color: #fff;
25 line-height: 34px;
26 font-size: 20px;
27 padding: 0 10px;
28 }
29 .footer {
30 430px;
31 height: 50px;
32 background: #666;
33 position: absolute;
34 bottom: 0;
35 padding: 10px;
36 }
37 .footer input {
38 275px;
39 height: 45px;
40 outline: none;
41 font-size: 20px;
42 text-indent: 10px;
43 position: absolute;
44 border-radius: 6px;
45 right: 80px;
46 }
47 .footer span {
48 display: inline-block;
49 62px;
50 height: 48px;
51 background: #ccc;
52 font-weight: 900;
53 line-height: 45px;
54 cursor: pointer;
55 text-align: center;
56 position: absolute;
57 right: 10px;
58 border-radius: 6px;
59 }
60 .footer span:hover {
61 color: #fff;
62 background: #999;
63 }
64 #icon {
65 display: inline-block;
66 background: red;
67 60px;
68 height: 60px;
69 border-radius: 30px;
70 position: absolute;
71 bottom: 6px;
72 left: 14px;
73 cursor: pointer;
74 overflow: hidden;
75 }
76 img {
77 60px;
78 height: 60px;
79 }
80 .content {
81 font-size: 20px;
82 435px;
83 height: 662px;
84 overflow: auto;
85 padding: 5px;
86 }
87 .content li {
88 margin-top: 10px;
89 padding-left: 10px;
90 412px;
91 display: block;
92 clear: both;
93 overflow: hidden;
94 }
95 .content li img {
96 float: left;
97 }
98 .content li span{
99 background: #7cfc00;
100 padding: 10px;
101 border-radius: 10px;
102 float: left;
103 margin: 6px 10px 0 10px;
104 max- 310px;
105 border: 1px solid #ccc;
106 box-shadow: 0 0 3px #ccc;
107 }
108 .content li img.imgleft {
109 float: left;
110 }
111 .content li img.imgright {
112 float: right;
113 }
114 .content li span.spanleft {
115 float: left;
116 background: #fff;
117 }
118 .content li span.spanright {
119 float: right;
120 background: #7cfc00;
121 }
122 </style>
123 <script>
124 window.onload = function(){
125 var arrIcon = ['img/1.jpg','img/2.jpg'];
126 var num = 0; //控制头像改变
127 var iNow = -1; //用来累加改变左右浮动
128 var icon = document.getElementById('icon').getElementsByTagName('img');
129 var btn = document.getElementById('btn');
130 var text = document.getElementById('text');
131 var content = document.getElementsByTagName('ul')[0];
132 var img = content.getElementsByTagName('img');
133 var span = content.getElementsByTagName('span');
134
135 icon[0].onclick = function(){
136 if(num==0){
137 this.src = arrIcon[1];
138 num = 1;
139 }else if(num==1){
140 this.src = arrIcon[0];
141 num = 0;
142 }
143 }
144 btn.onclick = function(){
145 if(text.value ==''){
146 alert('发送内容不能为空');
147 }else {
148 content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
149 iNow++;
150 if(num==0){
151 img[iNow].className += 'imgright';
152 span[iNow].className += 'spanright';
153 }else {
154 img[iNow].className += 'imgleft';
155 span[iNow].className += 'spanleft';
156 }
157 text.value = '';
158 }
159 }
160 }
161 </script>
162 </head>
163 <body>
164 <div id="container">
165 <div class="header">
166 <span style="float: left;">白超华-博客园</span>
167 <span style="float: right;">20:30</span>
168 </div>
169 <ul class="content"></ul>
170 <div class="footer">
171 <div id="icon">
172 <img src="img/1.jpg" alt="">
173 </div>
174 <input id="text" type="text" placeholder="说点什么吧...">
175 <span id="btn">发送</span>
176 </div>
177 </div>
178 </body>
179 </html>