検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 模倣モバイル WeChat チャット インターフェイス_html5 チュートリアル スキル

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

WBOY
WBOYオリジナル
2016-05-16 15:51:583103ブラウズ

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

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

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  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;
    18. 位置: 相対
    19. ボックスシャドウ: 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. ;
  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;
    140. btn.onclick
  140. =
    141. 関数
  141. (){ if(text.value ==''){
  142. アラート('空のメッセージを送信できません');
    143. content.innerHTML = '
  143. <
    144. li
  144. >
    145. <
  145. img src="' arrIcon[num] '"><スパン>' text.value 'スパン>リ>'; iNow if(num==0){
  146. img[iNow].className = 'imgright'
  147. span[iNow].className = 'spanright'; img[iNow].className = 'imgleft'
  148. span[iNow].className = 'spanleft';
  149. text.value = '';
    150. // コンテンツが多すぎる場合は、スクロールバーを一番下に配置します
  151. contentcontent.scrollTop=content.scrollHeight;
  152. }
  153. スクリプト>
  154. 頭>
  155. <ボディ>
  156. <div id="コンテナ" >
  157. <div class="ヘッダー" >
  158. <スパン スタイル=" float: left;">素人草: 模擬 WeChat チャット インターフェイススパン>
  159. <スパン スタイル=" float: right;">14:21スパン>
  160. div>
  161. <ul クラス="コンテンツ" >
  163. ul>
  164. <div class="フッター" >
  165. <div id="user_face_icon" >
  166. <img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
  167. div>
  168.  <input id="text" type="text" placeholder="Say something...">
  169.  <span id="btn" >Sendspan>
  170. div>
  171.  div> 
  172. body>
  173. 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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 は Audio タグを使用して歌詞同期の効果を実現します _html5 チュートリアル スキル次の記事：HTML5 は Audio タグを使用して歌詞同期の効果を実現します _html5 チュートリアル スキル

関連記事

続きを見る