HTML5仿手机微信聊天界面_html5教程技巧

给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：

源代码如下：

XML/HTML Code复制内容到剪贴板

1. /span>>
2. html>
3. head>
4. meta charset="UTF-8">
5. title>HTML5模拟微信聊天界面title>
6. style>
7. /**重置标签默认样式*/
8. * {
9. margin: 0;
10. padding: 0;
11. list-style: none;
12. font-family: '微软雅黑'
13. }
14. #container {
15. width: 450px;
16. height: 780px;
17. background: #eee;
18. margin: 80px auto 0;
19. position: relative;
20. box-shadow: 20px 20px 55px #777;
21. }
22. .header {
23. background: #000;
24. height: 40px;
25. color: #fff;
26. line-height: 34px;
27. font-size: 20px;
28. padding: 0 10px;
29. }
30. .footer {
31. width: 430px;
32. height: 50px;
33. background: #666;
34. position: absolute;
35. bottom: 0;
36. padding: 10px;
37. }
38. .footer input {
39. width: 275px;
40. height: 45px;
41. outline: none;
42. font-size: 20px;
43. text-indent: 10px;
44. position: absolute;
45. border-radius: 6px;
46. right: 80px;
47. }
48. .footer span {
49. display: inline-block;
50. width: 62px;
51. height: 48px;
52. background: #ccc;
53. font-weight: 900;
54. line-height: 45px;
55. cursor: pointer;
56. text-align: center;
57. position: absolute;
58. right: 10px;
59. border-radius: 6px;
60. }
61. .footer span:hover {
62. color: #fff;
63. background: #999;
64. }
65. #user_face_icon {
66. display: inline-block;
67. background: red;
68. width: 60px;
69. height: 60px;
70. border-radius: 30px;
71. position: absolute;
72. bottom: 6px;
73. left: 14px;
74. cursor: pointer;
75. overflow: hidden;
76. }
77. img {
78. width: 60px;
79. height: 60px;
80. }
81. .content {
82. font-size: 20px;
83. width: 435px;
84. height: 662px;
85. overflow: auto;
86. padding: 5px;
87. }
88. .content li {
89. margin-top: 10px;
90. padding-left: 10px;
91. width: 412px;
92. display: block;
93. clear: both;
94. overflow: hidden;
95. }
96. .content li img {
97. float: left;
98. }
99. .content li span{
100. background: #7cfc00;
101. padding: 10px;
102. border-radius: 10px;
103. float: left;
104. margin: 6px 10px 0 10px;
105. max-width: 310px;
106. border: 1px solid #ccc;
107. box-shadow: 0 0 3px #ccc;
108. }
109. .content li img.imgleft {
110. float: left;
111. }
112. .content li img.imgright {
113. float: right;
114. }
115. .content li span.spanleft {
116. float: left;
117. background: #fff;
118. }
119. .content li span.spanright {
120. float: right;
121. background: #7cfc00;
122. }
123. style>
124. script>
125. window.onload = function(){
126. var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
127. var num = 0; //控制头像改变
128. var iNow = -1; //用来累加改变左右浮动
129. var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
130. var btn = document.getElementById('btn');
131. var text = document.getElementById('text');
132. var content = document.getElementsByTagName('ul')[0];
133. var img = content.getElementsByTagName('img');
134. var span = content.getElementsByTagName('span');
136. icon[0].onclick = function(){
137. if(num==0){
138. this.src = arrIcon[1];
139. num = 1;
140. }else if(num==1){
141. this.src = arrIcon[0];
142. num = 0;
143. }
144. }
145. btn.onclick = function(){
146. if(text.value ==''){
147. alert('不能发送空消息');
148. }else {
149. content.innerHTML += 'li>img src="'+arrIcon[num]+'">span>'+text.value+'span>li>';
150. iNow++;
151. if(num==0){
152. img[iNow].className += 'imgright';
153. span[iNow].className += 'spanright';
154. }else {
155. img[iNow].className += 'imgleft';
156. span[iNow].className += 'spanleft';
157. }
158. text.value = '';
159. // 内容过多时,将滚动条放置到最底端
160. contentcontent.scrollTop=content.scrollHeight;
161. }
162. }
163. }
164. script>
165. head>
166. body>
167. div id="container">
168. div class="header">
169. span style="float: left;">业余草:模拟微信聊天界面span>
170. span style="float: right;">14:21span>
171. div>
172. ul class="content">
174. ul>
175. div class="footer">
176. div id="user_face_icon">
177. img src="http://www.xttblog.com/icons/favicon.ico" alt="">
178. div>
179. input id="text" type="text" placeholder="说点什么吧...">
180. span id="btn">发送span>
181. div>
182. div>
183. body>
184. html>

以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。

原文:http://www.xttblog.com/?p=265