HTML5 imitation mobile WeChat chat interface_html5 compétences tutorielles-Tutoriel H5-php.cn

HTML5 imitation mobile WeChat chat interface_html5 compétences tutorielles

WBOY

Libérer： 2016-05-16 15:51:58

original

3048 Les gens l'ont consulté

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

>
<html>
<tête>
<méta charset="UTF- 8">
<title>Interface de chat WeChat simulée HTML5titre>
<style>
/**Réinitialiser le style par défaut de l'étiquette*/
* {
marge : 0
remplissage : 0
style de liste : aucun ;
famille de polices : 'Microsoft Yahei'
largeur : 450px
hauteur : 780px
fond : #eee
marge : 80px auto 0
position : relative ;
boîte-ombre : 20px 20px 55px #777
.footer {
largeur : 430 px ;
hauteur : 50 px ;
arrière-plan : #666 ;
position : absolue ;
en bas : 0 ;
remplissage : 10 px ;
}
.footer input {
largeur : 275 px ;
hauteur : 45 px ;
contour : aucun ;
taille de la police : 20 px ;
text-indent : 10px ;
position : absolue ;
border-radius : 6px ;
à droite : 80 px ;
}
.footer span {
affichage : bloc en ligne ;
largeur : 62 px ;
hauteur : 48 px ;
arrière-plan : #ccc ;
poids de la police : 900 ;
hauteur de la ligne : 45 px ;
curseur : pointeur ;
text-align: center;
position : absolue ;
à droite : 10 px ;
border-radius : 6px ;
}
.footer span:hover {
couleur : #fff;
arrière-plan : #999 ;
}
#user_face_icon {
affichage : bloc en ligne ;
fond : rouge ;
largeur : 60 px ;
hauteur : 60 px ;
border-radius : 30px ;
position : absolue ;
en bas : 6 px ;
gauche : 14 px ;
curseur : pointeur ;
débordement : masqué ;
}
img {
largeur : 60 px ;
hauteur : 60 px ;
}
.content {
taille de la police : 20 px ;
largeur : 435 px ;
hauteur : 662 px ;
débordement : auto ;
remplissage : 5 px ;
}
.content li {
marge supérieure : 10 px ;
padding-left : 10px ;
largeur : 412 px ;
affichage : bloquer ;
clair : les deux ;
débordement : masqué ;
}
.content li img {
flotteur : gauche ;
}
.content li span{
arrière-plan : #7cfc00 ;
remplissage : 10 px ;
border-radius : 10px ;
flotteur : gauche ;
marge : 6px 10px 0 10px ;
largeur maximale : 310 px ;
bordure : 1px solide #ccc ;
box-shadow : 0 0 3px #ccc;
}
.content li img.imgleft {
flotteur : gauche ;
}
.content li img.imgright {
float : à droite ;
}
.content li span.spanleft {
flotteur : gauche ;
arrière-plan : #fff ;
}
.content li span.spanright {
float : à droite ;
arrière-plan : #7cfc00 ;
}
style>
<script>
window.onload = fonction(){
var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com /wp-content/uploads/2016/03/123.png'];
var num = 0 //Contrôler le changement d'avatar
var iNow = -1; //Utilisé pour accumuler et changer les flotteurs gauche et droit
var icon = document.getElementById('user_face_icon').getElementsByTagName('img'); 🎜>
var btn = document.getElementById('btn'); var
text = document.getElementById('text'); var content
= document.getElementsByTagName('ul')[0]; > var img =
content.getElementsByTagName('img'); var span = content
.getElementsByTagName('span'); icône[0].onclick =
fonction(){
if(num==0){
this.src = arrIcon[1]
num = 1
; }sinon if(num==1){
this.src = arrIcon[0]
num = 0
= fonction(){ if(
==''){ alert('Impossible d'envoyer un message vide');
<
><img src="' arrIcon[num] '"><span>' text.value 'span>li>' iNow
num
img[iNow].className = 'imgright';
text.value = ''
// Lorsqu'il y a trop de contenu, placez la barre de défilement vers le bas
contentcontent.scrollTop=content.scrollHeight
}
script>
tête>
<corps>
<div id="conteneur" >
<div class="en-tête" >
<span style=" flottant : gauche;">Herbe amateur : interface de chat WeChat simuléespan>
<span style=" flottant : à droite;">14:21span>
div>
<ul class="contenu" >
ul>
<div class="pied de page" >
<div id="user_face_icon" >
<img src="http : //www.xttblog.com/icons/favicon.ico" alt="">
div>
input 🎜> type="text" placehold. >"說點什麼吧..."> span>
送span> > > div>
div>
body>
html> 以上就是本文的全部內容，是不是很精彩，希望對大家的學習有所幫助。

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