HTML5 模倣モバイル WeChat チャットインターフェイス_html5 チュートリアルスキル-H5 チュートリアル-php.cn

HTML5 模倣モバイル WeChat チャットインターフェイス_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:51:58

オリジナル

3054 人が閲覧しました

私が紹介するのは、HTML5 を模倣したモバイル WeChat チャットインターフェイスです。スクリーンショットの効果は次のとおりです。

ソースコードは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー

>
<html>
<頭>
<メタ charset="UTF- 8">
<タイトル>HTML5 シミュレートされた WeChat チャットインターフェイスタイトル>
<スタイル>
/**ラベルのデフォルトのスタイルをリセット*/
* {
マージン: 0;
パディング: 0;
リストスタイル: なし
フォントファミリー: 'Microsoft Yahei'
幅: 450px;
高さ: 780px;
背景: #eee;
マージン: 80px 自動 0;
.header {
背景: #000;
高さ: 40px;
色: #fff;
行の高さ: 34px;
フォントサイズ: 20px;
パディング: 0 10px;
}
.footer {
幅: 430px;
高さ: 50px;
背景: #666;
位置: 絶対。
下: 0;
パディング: 10px;
}
.footer input {
幅: 275px;
高さ: 45px;
概要: なし。
font-size: 20px;
text-indent: 10px;
位置: 絶対。
border-radius: 6px;
右: 80px;
}
.footer span {
display: inline-block;
幅: 62px;
高さ: 48px;
背景: #ccc;
font-weight: 900;
line-height: 45px;
カーソル: ポインタ。
text-align: center;
位置: 絶対。
右: 10px;
border-radius: 6px;
}
.footer span:hover {
カラー: #fff;
背景: #999;
}
#user_face_icon {
display: inline-block;
背景: 赤;
幅: 60px;
高さ: 60px;
border-radius: 30px;
位置: 絶対。
下: 6px;
左: 14px;
カーソル: ポインタ。
オーバーフロー: 非表示。
}
img {
幅: 60px;
高さ: 60px;
}
.content {
font-size: 20px;
幅: 435px;
高さ: 662px;
オーバーフロー: 自動;
パディング: 5px;
}
.content li {
margin-top: 10px;
padding-left: 10px;
幅: 412px;
表示: ブロック;
クリア: 両方。
オーバーフロー: 非表示。
}
.content li img {
float: 左;
}
.content li span{
背景: #7cfc00;
パディング: 10px;
border-radius: 10px;
float: 左;
マージン: 6px 10px 0 10px;
最大幅: 310px;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
}
.content li img.imgleft {
float: 左;
}
.content li img.imgright {
float: 右;
}
.content li span.spanleft {
float: 左;
背景: #fff;
}
.content li span.spanright {
float: 右;
背景: #7cfc00;
}
スタイル>
<スクリプト>
window.onload = function(){
var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com /wp-content/uploads/2016/03/123.png'];
var num = 0 //アバターの変更を制御します
var iNow = -1; // 左右の浮動小数点数の蓄積と変更に使用されます
var アイコン = ドキュメント.getElementById('user_face_icon').getElementsByTagName('img'); 🎜>
var btn = ドキュメント.getElementById('btn'); var
テキスト = ドキュメント.getElementById('text'); var コンテンツ
= ドキュメント.getElementsByTagName('ul')[0]; > var img =
content.getElementsByTagName('img'); var スパン = コンテンツ
.getElementsByTagName('span'); icon[0].onclick =
関数(){
if(num==0){
this.src = arrIcon[1];
num = 1; }else if(num==1){
this.src = arrIcon[0];
num = 0;
=
(){ if(text.value ==''){
アラート('空のメッセージを送信できません');
<
>
img src="' arrIcon[num] '"><スパン>' text.value 'スパン>リ>'; iNow if(num==0){
img[iNow].className = 'imgright'
span[iNow].className = 'spanright'; img[iNow].className = 'imgleft'
span[iNow].className = 'spanleft';
text.value = '';
contentcontent.scrollTop=content.scrollHeight;
}
スクリプト>
頭>
<ボディ>
<div id="コンテナ" >
<div class="ヘッダー" >
<スパンスタイル=" float: left;">素人草: 模擬 WeChat チャットインターフェイススパン>
<スパンスタイル=" float: right;">14:21スパン>
div>
<ul クラス="コンテンツ" >
ul>
<div class="フッター" >
<div id="user_face_icon" >
<img src="http: //www.xttblog.com/icons/favicon.ico" alt="">
div>
<input id="text" type="text" placeholder="Say something...">
<span id="btn" >Sendspan>
div>
div>
body>
html>