suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5-Imitation der mobilen WeChat-Chat-Schnittstelle_HTML5-Tutorial-Fähigkeiten

HTML5-Imitation der mobilen WeChat-Chat-Schnittstelle_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:583030Durchsuche

Was ich Ihnen bringe, ist die HTML5-Imitation der mobilen WeChat-Chat-Oberfläche. Der Screenshot-Effekt ist wie folgt:

Der Quellcode lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  2. <html>
  3. <Kopf>
  4.  <meta charset="UTF- 8"> 
  5.  <Titel>HTML5-simulierte WeChat-Chat-SchnittstelleTitel>
  6. <Stil>
  7. /**Setzen Sie den Standardstil des Etiketts zurück*/
  8. * {
  9. Rand: 0;
  10. Auffüllung: 0;
  11. Listenstil: keiner;
  12. Schriftfamilie: 'Microsoft Yahei'
  13.                                                              
    14.                                                             
  14. Breite: 450px;
  15. Höhe: 780px;
  16. Hintergrund: #eee;
  17. Rand: 80px automatisch 0;
  18. Position: relativ;
  19. box-shadow: 20px 20px 55px #777;
    20.                                                              
  20. .header {
  21. Hintergrund: #000;
  22. Höhe: 40px;
  23. Farbe: #fff;
  24. Zeilenhöhe: 34px
  25. Schriftgröße: 20px;
  26. Auffüllung: 0 10px
  27. }  
  28.         .footer {   
  29.             Breite: 430px;   
  30.             Höhe: 50px;   
  31.             Hintergrund: #666;   
  32.             Position: absolut;   
  33.             unten: 0;   
  34.             padding: 10px;   
  35.         }   
  36.         .footer input {   
  37.             Breite: 275px;   
  38.             Höhe: 45px;   
  39.             Umriss: keine;   
  40.             Schriftgröße: 20px;   
  41.             text-indent: 10px;   
  42.             Position: absolut;   
  43.             Rahmenradius: 6px;   
  44.             rechts: 80px;   
  45.         }   
  46.         .footer span {   
  47.             display: inline-block;   
  48.             Breite: 62px;   
  49.             Höhe: 48px;   
  50.             Hintergrund: #ccc;   
  51.             Schriftstärke: 900;   
  52.             Zeilenhöhe: 45px;   
  53.             Cursor: Zeiger;   
  54.             text-align: center;   
  55.             Position: absolut;   
  56.             rechts: 10px;   
  57.             Rahmenradius: 6px;   
  58.         }   
  59.         .footer span:hover {   
  60.             Farbe: #fff;   
  61.             Hintergrund: #999;   
  62.         }  
  63.         #user_face_icon {   
  64.             display: inline-block;   
  65.             Hintergrund: rot;   
  66.             Breite: 60px;   
  67.             Höhe: 60px;   
  68.             Rahmenradius: 30px;   
  69.             Position: absolut;   
  70.             unten: 6px;   
  71.             links: 14px;   
  72.             Cursor: Zeiger;   
  73.             Überlauf: versteckt;   
  74.         }   
  75.         img {   
  76.             Breite: 60px;   
  77.             Höhe: 60px;   
  78.         }   
  79.         .content {   
  80.             Schriftgröße: 20px;   
  81.             Breite: 435px;   
  82.             Höhe: 662px;   
  83.             overflow: auto;   
  84.             Padding: 5px;   
  85.         }   
  86.         .content li {   
  87.             margin-top: 10px;   
  88.             padding-left: 10px;   
  89.             Breite: 412px;   
  90.             display: block;   
  91.             klar: beide;   
  92.             Überlauf: versteckt;   
  93.         }   
  94.         .content li img {   
  95.             float: links;   
  96.         }  
  97.         .content li span{   
  98.             Hintergrund: #7cfc00;   
  99.             padding: 10px;   
  100.             Rahmenradius: 10px;   
  101.             float: links;   
  102.             Rand: 6px 10px 0 10px;   
  103.             max-width: 310px;   
  104.             Rahmen: 1px solid #ccc;   
  105.             box-shadow: 0 0 3px #ccc;   
  106.         }   
  107.         .content li img.imgleft {    
  108.             float: links;    
  109.         }   
  110.         .content li img.imgright {    
  111.             float: right;    
  112.         }   
  113.         .content li span.spanleft {    
  114.             float: links;   
  115.             Hintergrund: #fff;   
  116.         }   
  117.         .content li span.spanright {    
  118.             float: right;   
  119.             Hintergrund: #7cfc00;   
  120.         }
  121.  Stil> 
  122. <Skript>
  123. window.onload = Funktion(){
  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; //Avataränderung kontrollieren
  126. var iNow = -1; //Wird verwendet, um linke und rechte Floats zu akkumulieren und zu ändern
  127. var icon = document.getElementById('user_face_icon').getElementsByTagName('img'); 🎜>
  128. var btn = document.getElementById('btn');
  129. var text = document.getElementById('text'); var
  130. content = document.getElementsByTagName('ul')[0]; > var img
  131. = content.getElementsByTagName('img'); var span =
  132. content.getElementsByTagName('span'); icon[0].onclick
  133. = function
  134. (){ if(num==0){
  135.  this.src = arrIcon
  136. [1];  num = 1;
  137. }sonst if(num==1){
  138.  this.src = arrIcon[0];
    139.  
  139. num = 0;                                                                                             
    140.                                                           
    141. btn.onclick
  141. =
    142. Funktion
  142. (){ if(text.value ==''){
  143. warning('Leere Nachricht kann nicht gesendet werden');                                                                                       
    144. content.innerHTML = '
  144. <
    145. li
  145. >
    146. <
  146. img src="' arrIcon[num] '"><span>' text.value 'span>li>'; iNow ; if(num==0){
  147. img[iNow].className = 'imgright';
    148.       span[iNow].className = 'spanright';
  148.                                                                                                        img[iNow].className = 'imgleft'; span[iNow].className = 'spanleft';
    149.                                              
  149.  text.value = '';
  150. // Wenn zu viel Inhalt vorhanden ist, platzieren Sie die Bildlaufleiste nach unten
  151. contentcontent.scrollTop=content.scrollHeight;
  152.                                                                     
    153.                                                           
  153. }
  154. Skript>
  155. Kopf>
  156. <Körper>
  157.  <div id="container" >
  158.  <div class="header" >
  159.  <span style=" float: left;">Amateurrasen: simulierte WeChat-Chat-Schnittstellespan>
  160.  <span style=" float: right;">14:21span>
  161. div>
  162.  <ul Klasse="Inhalt" >
  164. ul>
  165.  <div class="footer" >
  166.  <div id="user_face_icon" >
  167.  <img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
  168. div>
  169.  <input id="texte" type="texte" placeholder="Dis quelque chose...">
  170.  <span id="btn" >Envoyerspan>
  171. div>
  172.  div> 
  173. corps>
  174. html>

Ce qui précède représente l’intégralité du contenu de cet article. N’est-il pas passionnant, j’espère que cela sera utile à l’étude de chacun ?

Texte original :http://www.xttblog.com/?p=265

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5 verwendet das Audio-Tag, um den Effekt der Liedtextsynchronisierung zu erzielen. _html5-Tutorial-FähigkeitenNächster Artikel：HTML5 verwendet das Audio-Tag, um den Effekt der Liedtextsynchronisierung zu erzielen. _html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen