HTML5 模倣モバイル WeChat チャット インターフェイス_html5 チュートリアル スキル

私が紹介するのは、HTML5 を模倣したモバイル WeChat チャット インターフェイスです。スクリーンショットの効果は次のとおりです。

ソースコードは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー

1. /span>>
2. html>
3. 頭>
4. メタ charset="UTF- 8">
5. タイトル>HTML5 シミュレートされた WeChat チャット インターフェイスタイトル>
6. スタイル>
7. /**ラベルのデフォルトのスタイルをリセット*/
8. * {
9. マージン: 0;
10. パディング: 0;
11. リストスタイル: なし
12. フォントファミリー: 'Microsoft Yahei'
14. 幅: 450px;
15. 高さ: 780px;
16. 背景: #eee;
17. マージン: 80px 自動 0;
位置: 相対
ボックスシャドウ: 20px 20px 55px #777;
20. .header {
21. 背景: #000;
22. 高さ: 40px;
23. 色: #fff;
24. 行の高さ: 34px;
25. フォントサイズ: 20px;
26. パディング: 0 10px;
27. }  
28. .footer {
29. 幅: 430px;   
30. 高さ: 50px;   
31. 背景: #666;   
32. 位置: 絶対。   
33. 下: 0;   
34. パディング: 10px;   
35. }
36. .footer input {
37. 幅: 275px;   
38. 高さ: 45px;   
39. 概要: なし。   
40. font-size: 20px;   
41. text-indent: 10px;   
42. 位置: 絶対。   
43. border-radius: 6px;   
44. 右: 80px;   
45. }
46. .footer span {
47. display: inline-block;   
48. 幅: 62px;   
49. 高さ: 48px;   
50. 背景: #ccc;   
51. font-weight: 900;   
52. line-height: 45px;   
53. カーソル: ポインタ。   
54. text-align: center;   
55. 位置: 絶対。   
56. 右: 10px;   
57. border-radius: 6px;   
58. }
59. .footer span:hover {
60. カラー: #fff;   
61. 背景: #999;   
62. }  
63. #user_face_icon {
64. display: inline-block;   
65. 背景: 赤;   
66. 幅: 60px;   
67. 高さ: 60px;   
68. border-radius: 30px;   
69. 位置: 絶対。   
70. 下: 6px;   
71. 左: 14px;   
72. カーソル: ポインタ。   
73. オーバーフロー: 非表示。   
74. }
75. img {
76. 幅: 60px;   
77. 高さ: 60px;   
78. }
79. .content {
80. font-size: 20px;   
81. 幅: 435px;   
82. 高さ: 662px;   
83. オーバーフロー: 自動;   
84. パディング: 5px;   
85. }
86. .content li {
87. margin-top: 10px;   
88. padding-left: 10px;   
89. 幅: 412px;   
90. 表示: ブロック;   
91. クリア: 両方。   
92. オーバーフロー: 非表示。   
93. }
94. .content li img {
95. float: 左;   
96. }  
97. .content li span{
98. 背景: #7cfc00;   
99. パディング: 10px;   
100. border-radius: 10px;   
101. float: 左;   
102. マージン: 6px 10px 0 10px;   
103. 最大幅: 310px;   
104. border: 1px solid #ccc;   
105. box-shadow: 0 0 3px #ccc;   
106. }
107. .content li img.imgleft {
108. float: 左;    
109. }
110. .content li img.imgright {
111. float: 右;    
112. }
113. .content li span.spanleft {
114. float: 左;   
115. 背景: #fff;   
116. }
117. .content li span.spanright {
118. float: 右;   
119. 背景: #7cfc00;   
120. }
121. スタイル>
122. スクリプト>
123. window.onload = function(){
124. var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com /wp-content/uploads/2016/03/123.png'];
125. var num = 0 //アバターの変更を制御します
;
126. var iNow = -1; // 左右の浮動小数点数の蓄積と変更に使用されます
127. var アイコン = ドキュメント.getElementById('user_face_icon').getElementsByTagName('img'); 🎜>
128. var btn = ドキュメント.getElementById('btn'); var
129. テキスト = ドキュメント.getElementById('text'); var コンテンツ
130. = ドキュメント.getElementsByTagName('ul')[0]; > var img =
131. content.getElementsByTagName('img'); var スパン = コンテンツ
132. .getElementsByTagName('span'); icon[0].onclick =
133. 関数(){
134. if(num==0){
135. this.src = arrIcon[1];
136. num = 1; }else if(num==1){
137. this.src = arrIcon[0];
138. num = 0;
btn.onclick
140. =
関数
141. (){ if(text.value ==''){
142. アラート('空のメッセージを送信できません');
content.innerHTML = '
li
144. >
img src="' arrIcon[num] '">スパン>' text.value 'スパン>リ>'; iNow if(num==0){
145. img[iNow].className = 'imgright'
146. span[iNow].className = 'spanright'; img[iNow].className = 'imgleft'
147. span[iNow].className = 'spanleft';
148. text.value = '';
// コンテンツが多すぎる場合は、スクロールバーを一番下に配置します
150. contentcontent.scrollTop=content.scrollHeight;
151. }
152. スクリプト>
153. 頭>
154. ボディ>
155. div id="コンテナ" >
156. div class="ヘッダー" >
157. スパン スタイル=" float: left;">素人草: 模擬 WeChat チャット インターフェイススパン>
158. スパン スタイル=" float: right;">14:21スパン>
159. div>
160. ul クラス="コンテンツ" >
162. ul>
163. div class="フッター" >
164. div id="user_face_icon" >
165. img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
166. div>
167.  input id="text" type="text" placeholder="Say something...">
168.  span id="btn" >Sendspan>
169. div>
170.  div> 
171. body>
172. html>

The above is the entire content of this article. Isn’t it exciting? I hope it will be helpful to everyone’s study.

Original text:http://www.xttblog.com/?p=265