찾다

집  >  기사  >  웹 프론트엔드  >  HTML5 모방 모바일 WeChat 채팅 인터페이스_html5 튜토리얼 기술

HTML5 모방 모바일 WeChat 채팅 인터페이스_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:51:583043검색

제가 여러분에게 제공하는 것은 HTML5 모방 모바일 WeChat 채팅 인터페이스입니다. 스크린샷 효과는 다음과 같습니다.

소스코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <머리>
  4.  <메타 문자 집합="UTF- 8"> 
  5.  <제목>HTML5 시뮬레이션 WeChat 채팅 인터페이스제목>
  6. <스타일>
  7. /**라벨 기본 스타일 재설정*/
  8. * {
  9. 여백: 0
  10. 패딩: 0
  11. 목록 스타일: 없음
  12. 글꼴 계열: 'Microsoft Yahei'
  13.                                                        
    14.                                                       
  14. 너비: 450px
  15. 높이: 780px
  16. 배경: #eee
  17. 여백: 80px 자동 0
  18. 위치: 친척
  19. 상자 그림자: 20px 20px 55px #777
  20.                                                        
    21. .header {
    22. 배경: #000
    23. 높이: 40px
    24. 색상: #fff
    25. 줄 높이: 34px
    26. 글꼴 크기: 20px
    27. 패딩: 0 10px
    28. }  
  28.         .footer {   
  29.             폭: 430px;   
  30.             높이: 50px;   
  31.             배경: #666;   
  32.             위치: 절대;   
  33.             하단: 0;   
  34.             패딩: 10px;   
  35.         }   
  36.         .footer 입력 {   
  37.             폭: 275px;   
  38.             높이: 45px;   
  39.             개요: 없음;   
  40.             글꼴 크기: 20px;   
  41.             텍스트 들여쓰기: 10px;   
  42.             위치: 절대;   
  43.             테두리 반경: 6px;   
  44.             오른쪽: 80px;   
  45.         }   
  46.         .footer span {   
  47.             디스플레이: 인라인 블록;   
  48.             너비: 62px;   
  49.             높이: 48px;   
  50.             배경: #ccc;   
  51.             글꼴 두께: 900;   
  52.             줄 높이: 45px;   
  53.             커서: 포인터;   
  54.             text-align: center;   
  55.             위치: 절대;   
  56.             오른쪽: 10px;   
  57.             테두리 반경: 6px;   
  58.         }   
  59.         .footer span:hover {   
  60.             색상: #fff;   
  61.             배경: #999;   
  62.         }  
  63.         #user_face_icon {   
  64.             디스플레이: 인라인 블록;   
  65.             배경: 빨간색;   
  66.             너비: 60px;   
  67.             높이: 60px;   
  68.             테두리 반경: 30px;   
  69.             위치: 절대;   
  70.             하단: 6px;   
  71.             왼쪽: 14px;   
  72.             커서: 포인터;   
  73.             오버플로: 숨김;   
  74.         }   
  75.         img {   
  76.             너비: 60px;   
  77.             높이: 60px;   
  78.         }   
  79.         .content {   
  80.             글꼴 크기: 20px;   
  81.             폭: 435px;   
  82.             높이: 662px;   
  83.             오버플로: 자동;   
  84.             패딩: 5px;   
  85.         }   
  86.         .content li {   
  87.             여백 상단: 10px;   
  88.             왼쪽 여백: 10px;   
  89.             폭: 412px;   
  90.             디스플레이: 차단;   
  91.             지우기: 둘 다;   
  92.             오버플로: 숨김;   
  93.         }   
  94.         .content li img {   
  95.             플로트: 왼쪽;   
  96.         }  
  97.         .content li span{   
  98.             배경: #7cfc00;   
  99.             패딩: 10px;   
  100.             테두리 반경: 10px;   
  101.             플로트: 왼쪽;   
  102.             여백: 6px 10px 0 10px;   
  103.             최대 너비: 310px;   
  104.             테두리: 1px 단색 #ccc;   
  105.             box-shadow: 0 0 3px #ccc;   
  106.         }   
  107.         .content li img.imgleft {    
  108.             플로트: 왼쪽;    
  109.         }   
  110.         .content li img.imgright {    
  111.             플로트: 오른쪽;    
  112.         }   
  113.         .content li span.spanleft {    
  114.             플로트: 왼쪽;   
  115.             배경: #fff;   
  116.         }   
  117.         .content li span.spanright {    
  118.             플로트: 오른쪽;   
  119.             배경: #7cfc00;   
  120.         }
  121.  스타일> 
  122. <스크립트>
  123. window.onload = 함수(){
  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 icon = 문서.getElementById('user_face_icon').getElementsByTagName('img')
  128. var btn = 문서.getElementById('btn')
  129. var text = 문서.getElementById('text')
  130. var content = 문서.getElementsByTagName('ul')[0]
  131. var img = content.getElementsByTagName('img')
  132. var span = content.getElementsByTagName('span')
  134. 아이콘[0].onclick = 기능(){
  135. if(num==0){
  136.  this.src = arrIcon[1]
  137.  개 = 1;
    138. }else if(번호==1){
  138.  this.src = arrIcon[0];
    139.  
  139. 개 = 0;                                                                                  
    140.                                                     
    141. btn.onclick
  141. =
    142. 함수
  142. (){ if(text.value ==''){
  143. 경고('빈 메시지를 보낼 수 없습니다')                                                                             
    144. content.innerHTML = '
  144. <
    145. li
  145. >
    146. <
  146. img src="' arrIcon[num] '"><스팬>' text.value '스팬>리>'; iNow if(num==0){
  147. img[iNow].className = 'imgright'
  148.       span[iNow].className = 'spanright';                                                                                              img[iNow].className = 'imgleft'
  149. 스팬[iNow].className = 'spanleft'
  150.                                           
  151.  text.value = ''
  152. // 내용이 너무 많으면 스크롤바를 맨 아래로 옮깁니다
  153. contentcontent.scrollTop=content.scrollHeight
  154.                                                              
    155.                                                     
  155. }
  156. 스크립트>
  157. 머리>
  158. <몸>
  159.  <div id="컨테이너" >
  160.  <div class="헤더" >
  161.  <스팬 스타일=" float: 왼쪽;">아마추어 풀: 시뮬레이션 WeChat 채팅 인터페이스span>
  162.  <스팬 스타일=" float: 그렇죠;">14:21스팬>
  163. div>
  164.  <ul class="content" >
  166. ul>
  167.  <div class="바닥글" >
  168.  <div id="user_face_icon" >
  169.  <img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
  170. div>
  171.  <입력 id="text" 유형="텍스트" 자리 표시자="말해 보세요...">
  172.  <span id="btn" >보내기스팬>
  173. div>
  174.  div> 
  175. 몸>
  176. html>

위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문:http://www.xttblog.com/?p=265

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5는 오디오 태그를 사용하여 가사 동기화 효과를 얻습니다. _html5 튜토리얼 기술다음 기사：HTML5는 오디오 태그를 사용하여 가사 동기화 효과를 얻습니다. _html5 튜토리얼 기술

관련 기사

더보기