cari

Rumah >hujung hadapan web >Tutorial H5 >Antara muka sembang WeChat mudah alih HTML5 tiruan_html5 kemahiran tutorial

Antara muka sembang WeChat mudah alih HTML5 tiruan_html5 kemahiran tutorial

WBOY
WBOYasal
2016-05-16 15:51:583079semak imbas

Apa yang saya bawa kepada anda ialah antara muka sembang WeChat mudah alih HTML5 Kesan tangkapan skrin adalah seperti berikut:

Kod sumber adalah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
  2. <html>
  3. <kepala>
  4.  <meta charset="UTF- 8"> 
  5.  <tajuk>antara muka sembang WeChat simulasi HTML5tajuk>
  6. <gaya>
  7. /**Tetapkan semula gaya lalai label*/
  8. * {
  9. jidar: 0;
  10. pelapik: 0;
  11. gaya senarai: tiada;
    12. keluarga fon: 'Microsoft Yahei'
    13.                                                               
  13.                                                              
    14. lebar: 450px;
    15. tinggi: 780px;
    16. latar belakang: #eee;
    17. jidar: 80px auto 0;
  17. kedudukan: relatif;
  18. bayang kotak: 20px 20px 55px #777;
    19.                                                               
  19. .header {
  20. latar belakang: #000;
  21. tinggi: 40px;
  22. warna: #fff;
  23. ketinggian baris: 34px;
  24. saiz fon: 20px;
    25. pelapik: 0 10px;
  25. }  
  26.         .pengaki {   
  27.             lebar: 430px;   
  28.             tinggi: 50px;   
  29.             latar belakang: #666;   
  30.             kedudukan: mutlak;   
  31.             bawah: 0;   
  32.             padding: 10px;   
  33.         }   
  34.         .input pengaki {   
  35.             lebar: 275px;   
  36.             tinggi: 45px;   
  37.             garis rangka: tiada;   
  38.             saiz fon: 20px;   
  39.             inden teks: 10px;   
  40.             kedudukan: mutlak;   
  41.             jejari sempadan: 6px;   
  42.             kanan: 80px;   
  43.         }   
  44.         .span pengaki {   
  45.             paparan: blok sebaris;   
  46.             lebar: 62px;   
  47.             tinggi: 48px;   
  48.             latar belakang: #ccc;   
  49.             berat fon: 900;   
  50.             ketinggian garisan: 45px;   
  51.              kursor: penunjuk;   
  52.             text-align: center;   
  53.             kedudukan: mutlak;   
  54.             kanan: 10px;   
  55.             jejari sempadan: 6px;   
  56.         }   
  57.         .span footer:tuding {   
  58.             warna: #fff;   
  59.             latar belakang: #999;   
  60.         }  
  61.         #user_face_icon {   
  62.             paparan: blok sebaris;   
  63.             latar belakang: merah;   
  64.             lebar: 60px;   
  65.             tinggi: 60px;   
  66.             jejari sempadan: 30px;   
  67.             kedudukan: mutlak;   
  68.             bawah: 6px;   
  69.             kiri: 14px;   
  70.              kursor: penunjuk;   
  71.              limpahan: tersembunyi;   
  72.         }   
  73.         img {   
  74.             lebar: 60px;   
  75.             tinggi: 60px;   
  76.         }   
  77.         .kandungan {   
  78.             saiz fon: 20px;   
  79.             lebar: 435px;   
  80.             tinggi: 662px;   
  81.              limpahan: auto;   
  82.             padding: 5px;   
  83.         }   
  84.         .kandungan li {   
  85.             margin atas: 10px;   
  86.             padding-kiri: 10px;   
  87.             lebar: 412px;   
  88.             paparan: sekat;   
  89.             jelas: kedua-duanya;   
  90.              limpahan: tersembunyi;   
  91.         }   
  92.         .content li img {   
  93.             terapung: kiri;   
  94.         }  
  95.         .content li span{   
  96.             latar belakang: #7cfc00;   
  97.             padding: 10px;   
  98.             jejari sempadan: 10px;   
  99.             terapung: kiri;   
  100.             margin: 6px 10px 0 10px;   
  101.             lebar maksimum: 310px;   
  102.             sempadan: 1px pepejal #ccc;   
  103.              bayang kotak: 0 0 3px #ccc;   
  104.         }   
  105.         .content li img.imgleft {    
  106.             terapung: kiri;    
  107.         }   
  108.         .content li img.imgright {    
  109.             terapung: kanan;    
  110.         }   
  111.         .content li span.span.spanleft {    
  112.             terapung: kiri;   
  113.             latar belakang: #fff;   
  114.         }   
  115.         .content li span.spanright {    
  116.             terapung: kanan;   
  117.             latar belakang: #7cfc00;   
  118.         }
  119.  gaya> 
  120. <skrip>
  121. window.onload = fungsi(){
  122. var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com /wp-content/uploads/2016/03/123.png'];
  123. var num = 0; //Kawal perubahan avatar
  124. var iNow = -1; //Digunakan untuk mengumpul dan menukar terapung kiri dan kanan
  125. var ikon = dokumen.getElementById('user_face_icon').getElementsByTagName('img'); 🎜>
  126. var btn = dokumen.getElementById('btn'); var
  127. teks = dokumen.getElementById('text'); var kandungan
  128. = dokumen.getElementsByTagName('ul')[0]; > var img =
  129. kandungan.getElementsByTagName('img'); var span = kandungan
  130. .getElementsByTagName('span'); ikon[0].onclick =
  131. fungsi(){
  132. jika(bilangan==0){  
  133. ini.src = arrIcon[1];
  134.  bilangan = 1;
  135. }lain jika(bilangan==1){
  136.  ini.src = arrIcon[0];
  137.  bilangan = 0;
    138.                                                                                                                                        
  138.                                                            
  139. btn.onclick
    140. =
  140. fungsi(){ jika(nilai teks
    141. ==''){
  141. makluman('Tidak boleh menghantar mesej kosong');
    142.                                                                                     
  142. content.innerHTML = '
    143. <
  143. li
    144. >
  144. <img src="' arrIcon[num] '"><span>' text.value 'span>li>' iNow ; jika(
    145. bilangan
  145. ==0){
  146. img[iNow].className = 'imgright';       span[iNow].className = 'spanright';
    147.                                                                                                                                                      
  147. img[iNow].className = 'imgleft';
  148. span[iNow].className = 'spanleft';
  149.                                              
  150.  nilai teks = '';
    151. // Apabila terdapat terlalu banyak kandungan, letakkan bar skrol ke bawah
  152. kandungankandungan.scrollTop=content.scrollHeight;
    153.                                                                      
  153.                                                            
    154. }
  154. skrip>
  155. kepala>
  156. <badan>
  157.  <div id="bekas" >
  158.  <div kelas="header" >
  159.  <span gaya=" apungan: kiri;">Rumput amatur: simulasi antara muka sembang WeChatspan>
  160.  <span gaya=" apungan: betul;">14:21span>
  161. div>
  162.  <ul kelas="kandungan" >
  164. ul>
  165.  <div kelas="footer" >
  166.  <div id="user_face_icon" >
  167.  <img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
  168. div>
  169.  <Eingabe id="text" Typ="Text" Platzhalter=„Sag etwas…“>
  170.  <span id="btn" >Sendenspan>
  171. div>
  172.  div> 
  173. Körper>
  174. html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium hilfreich sein.

Originaltext:http://www.xttblog.com/?p=265

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML5 menggunakan teg Audio untuk mencapai kesan kemahiran tutorial _html5 penyegerakan lirikArtikel seterusnya：HTML5 menggunakan teg Audio untuk mencapai kesan kemahiran tutorial _html5 penyegerakan lirik

Artikel berkaitan

Lihat lagi