recherche

Maison >interface Web >Tutoriel H5 >HTML5 imitation mobile WeChat chat interface_html5 compétences tutorielles

HTML5 imitation mobile WeChat chat interface_html5 compétences tutorielles

WBOY
WBOYoriginal
2016-05-16 15:51:583081parcourir

Ce que je vous apporte, c'est l'interface de chat mobile WeChat imitation HTML5. L'effet de capture d'écran est le suivant :

Le code source est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html>
  3. <tête>
  4.  <méta charset="UTF- 8"> 
  5.  <title>Interface de chat WeChat simulée HTML5titre>
  6. <style>
  7. /**Réinitialiser le style par défaut de l'étiquette*/
  8. * {
  9. marge : 0
  10. remplissage : 0
  11. style de liste : aucun ;
  12. famille de polices : 'Microsoft Yahei'
  13.                                                              
    14.                                                             
  14. largeur : 450px
  15. hauteur : 780px
  16. fond : #eee
  17. marge : 80px auto 0
  18. position : relative ;
  19. boîte-ombre : 20px 20px 55px #777
  20.                                                              
    21. .header {
    22. fond : #000;
    23. hauteur : 40px
    24. couleur : #fff
    25. hauteur de ligne : 34px ;
    26. taille de police : 20 px ;
    27. remplissage : 0 10px
    28. }  
  28.         .footer {   
  29.             largeur : 430 px ;   
  30.             hauteur : 50 px ;   
  31.             arrière-plan : #666 ;   
  32.             position : absolue ;   
  33.             en bas : 0 ;   
  34.             remplissage : 10 px ;   
  35.         }   
  36.         .footer input {   
  37.             largeur : 275 px ;   
  38.             hauteur : 45 px ;   
  39.             contour : aucun ;   
  40.             taille de la police : 20 px ;   
  41.             text-indent : 10px ;   
  42.             position : absolue ;   
  43.             border-radius : 6px ;   
  44.             à droite : 80 px ;   
  45.         }   
  46.         .footer span {   
  47.             affichage : bloc en ligne ;   
  48.             largeur : 62 px ;   
  49.             hauteur : 48 px ;   
  50.             arrière-plan : #ccc ;   
  51.             poids de la police : 900 ;   
  52.             hauteur de la ligne : 45 px ;   
  53.             curseur : pointeur ;   
  54.             text-align: center;   
  55.             position : absolue ;   
  56.             à droite : 10 px ;   
  57.             border-radius : 6px ;   
  58.         }   
  59.         .footer span:hover {   
  60.             couleur : #fff;   
  61.             arrière-plan : #999 ;   
  62.         }  
  63.         #user_face_icon {   
  64.             affichage : bloc en ligne ;   
  65.             fond : rouge ;   
  66.             largeur : 60 px ;   
  67.             hauteur : 60 px ;   
  68.             border-radius : 30px ;   
  69.             position : absolue ;   
  70.             en bas : 6 px ;   
  71.             gauche : 14 px ;   
  72.             curseur : pointeur ;   
  73.             débordement : masqué ;   
  74.         }   
  75.         img {   
  76.             largeur : 60 px ;   
  77.             hauteur : 60 px ;   
  78.         }   
  79.         .content {   
  80.             taille de la police : 20 px ;   
  81.             largeur : 435 px ;   
  82.             hauteur : 662 px ;   
  83.             débordement : auto ;   
  84.             remplissage : 5 px ;   
  85.         }   
  86.         .content li {   
  87.             marge supérieure : 10 px ;   
  88.             padding-left : 10px ;   
  89.             largeur : 412 px ;   
  90.             affichage : bloquer ;   
  91.             clair : les deux ;   
  92.             débordement : masqué ;   
  93.         }   
  94.         .content li img {   
  95.             flotteur : gauche ;   
  96.         }  
  97.         .content li span{   
  98.             arrière-plan : #7cfc00 ;   
  99.             remplissage : 10 px ;   
  100.             border-radius : 10px ;   
  101.             flotteur : gauche ;   
  102.             marge : 6px 10px 0 10px ;   
  103.             largeur maximale : 310 px ;   
  104.             bordure : 1px solide #ccc ;   
  105.             box-shadow : 0 0 3px #ccc;   
  106.         }   
  107.         .content li img.imgleft {    
  108.             flotteur : gauche ;    
  109.         }   
  110.         .content li img.imgright {    
  111.             float : à droite ;    
  112.         }   
  113.         .content li span.spanleft {    
  114.             flotteur : gauche ;   
  115.             arrière-plan : #fff ;   
  116.         }   
  117.         .content li span.spanright {    
  118.             float : à droite ;   
  119.             arrière-plan : #7cfc00 ;   
  120.         }
  121.  style> 
  122. <script>
  123. window.onload = fonction(){
  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 //Contrôler le changement d'avatar
  126. var iNow = -1; //Utilisé pour accumuler et changer les flotteurs gauche et droit
  127. var icon = document.getElementById('user_face_icon').getElementsByTagName('img'); 🎜>
  128. var btn = document.getElementById('btn'); var
  129. text = document.getElementById('text'); var content
  130. = document.getElementsByTagName('ul')[0]; > var img =
  131. content.getElementsByTagName('img'); var span = content
  132. .getElementsByTagName('span'); icône[0].onclick =
  133. fonction(){
  134. if(num==0){  
  135. this.src = arrIcon[1]
  136.  num = 1
  137. ; }sinon if(num==1){
  138.  this.src = arrIcon[0]
  139.  num = 0
  140.                                                                                               
    141.                                                           
    142. btn.onclick
  142. = fonction(){ if(
    143. text.value
  143. ==''){ alert('Impossible d'envoyer un message vide');
  144.                                                                                        
    145. content.innerHTML = '
  145. <
    146. li
  146. ><img src="' arrIcon[num] '"><span>' text.value 'span>li>' iNow
    147. if(
  147. num
    148. ==0){
  148. img[iNow].className = 'imgright';
    149.       span[iNow].className = 'spanright';
  149.                                                                                                         
    150. img[iNow].className = 'imgleft';
    151. span[iNow].className = 'spanleft';
    152.                                              
  152.  text.value = ''
    153. ;
  153. // Lorsqu'il y a trop de contenu, placez la barre de défilement vers le bas
  154. contentcontent.scrollTop=content.scrollHeight
  155.                                                                     
    156.                                                           
  156. }
  157. script>
  158. tête>
  159. <corps>
  160.  <div id="conteneur" >
  161.  <div class="en-tête" >
  162.  <span style=" flottant : gauche;">Herbe amateur : interface de chat WeChat simuléespan>
  163.  <span style=" flottant : à droite;">14:21span>
  164. div>
  165.  <ul class="contenu" >
  167. ul>
  168.  <div class="pied de page" >
  169.  <div id="user_face_icon" >
  170.  <img src="http : //www.xttblog.com/icons/favicon.ico" alt="">
  171. div>
  172.             input 🎜> type="text" placehold. >"說點什麼吧...">               span>
  173. 送span> > >         div>  
  174.     div>  
  175.   
  176. body>  
  177. html>   以上就是本文的全部內容，是不是很精彩，希望對大家的學習有所幫助。
    178. 原文:
http://www.xttblog.com/?p=265

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML5 utilise la balise Audio pour obtenir l'effet de synchronisation des paroles _html5 compétences du didacticielArticle suivant：HTML5 utilise la balise Audio pour obtenir l'effet de synchronisation des paroles _html5 compétences du didacticiel

Articles Liés

Voir plus