jQuery手机聊天界面

来源：互联网 2023-03-16 23:54:27 版权归原作者所有，如有侵权，请联系我们

jQuery手机聊天界面

工具/原料

adobe dreamweaver

方法/步骤

准备好需要用到的图标。

jQuery手机聊天界面

新建html文档。

jQuery手机聊天界面

2此文章未经许可获取自百度经验

新建html文档。

header class="header"> a class="back" href="javascript:history.back()">/a>

h5 class="tit">追星星的人/h5>

div class="right">资料/div>

/header>

div class="message">

div class="send">

div class="time">05/22 06:30/div>

div class="msg"> img src="images/touxiang.png" alt="" />

i class="msg_input">/i>你好在不在呀，妹子！/

/div>

div class="show">

div class="time">05/22 06:30/div>

div class="msg"> img src="images/touxiangm.png" alt="" />

i clas="msg_input">/i>你好你好你好/

/div>

div class="footer"> img src="images/hua.png" alt="" /> img src="images/xiaolian.png" alt="" />

input type="text" />

发送/

/div>

jQuery手机聊天界面

书写css代码。

h5 { margin: 0; }

img { max-width: 100%; vertical-align: middle }

input { outline: none; }

body { max-width: 720px; margin: 0 auto; background: #f1f1f1; color: #333; font-size: 0.26rem; }

.header { border-bottom: 1px solid #dfdfdf; padding: 0 0.2rem; height: 1rem; line-height: 1rem; background: #fff; position: fixed; width: 100%; max-width: 720px; box-sizing: border-box; z-index: 100; }

.back { position: absolute; top: 0; left: 0.3rem; background: url(./images/left.png) no-repeat; width: 0.2rem; height: 0.4rem; margin-top: 0.34rem; background-size: 0.2rem 0.4rem; }

.header .tit { font-size: 0.32rem; vertical-align: middle; text-align: center; height: 1rem; line-height: 1rem; font-weight: normal; }

.header .right { position: absolute; right: 0.3rem; top: 0; float: none; font-size: 0.24rem; line-height: 1.2rem; }

.message { background-color: #f1f1f1; padding: 1.2rem 0.3rem 1rem 0.3rem; }

.time { font-size: 0.24rem; color: #999; margin-bottom: 0.3rem; text-align: center; }

.footer { position: fixed; bottom: 0; height: 1rem; background-color: #fff; line-height: 1rem; width: 100%; max-width: 720px; border-top: 1px solid #ddd; }

.footer img { margin-left: 0.2rem; width: 0.5rem; }

.footer input { margin-left: 0.2rem; width: 3.5rem; height: 0.64rem; border-radius: 0.1rem; border: 0.01rem solid #ddd; padding : 0 0.15rem; }

.footer p { width: 1.2rem; height: 0.68rem; font-size: 0.3rem; color: #fff; line-height: 0.68rem; text-align: center; background-color: #ddd; border-radius: 0.1rem; float: right; margin-top: 0.2rem; margin-right: 0.2rem; }

.send:after, .show:after, .msg:after { content: ""; clear: both; display: table; }

.msg>img { width: 0.8rem; float: left; }

.msg>p { float: left; margin: 0 0.4rem; padding: 0.25rem; background: #fff; font-size: 0.3rem; position: relative; border-radius: 0.2rem; max-width: 5rem; box-sizing: border-box; }

.msg_input { position: absolute; background: url(./images/msg-input.png) no-repeat; background-size: 0.31rem auto; width: 0.31rem; height: 0.51rem; left: -0.31rem; top: 0.25rem; }

.show .msg img, .show .msg p, .show .msg { float: right; }

.show .msg_input { left: auto; right: -0.11rem; transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); /* Opera */ }

.send, .show { padding-bottom: 0.3rem; }

.alert_novip, .flower_num, .give_flower { display: none; padding: 0.3rem 0.5rem; font-size: 0.28rem; }

.alert_novip p, .flower_num p { margin-bottom: 0.45rem; }

.layui-layer-wrap button { font-size: 0.28rem; padding: 0.2rem 0.3rem; margin-top: 0.1rem; background: #f8f8f8; border-radius: 10px; }

.flower_num button { padding: 0.2rem 0.5rem; border-radius: 10px; }

.layui-layer-wrap button:first-child { float: left; }

.layui-layer-wrap button:last-child { float: right; background: #FF7171; color: #fff; }

.alert_novip button { padding: 0.2rem 0.3rem; border-radius: 10px }

.flower { width: 0.8rem; margin: 0 auto; }

.give_flower { text-align: center; }

.give_flower p { text-align: center; line-height: 1.5; }

.give_flower input { width: 1rem; margin-right: 0.1rem; margin-top: 0.2rem; }

.give_flower button { display: block; width: 3rem; font-size: 0.28rem; margin: 0 auto; margin-top: 0.6rem; float: none!important; line-height: 0.65rem; border-radius: 10px; }

jQuery手机聊天界面

书写并添加js代码。

script src="js/jquery.min.js">/script>

script src="js/flexible.js">/script>

script src="js/chat.js" >/script>

jQuery手机聊天界面

书写flexible.js代码。

script>

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

if(clientWidth>=720){

docEl.style.fontSize = '100px';

}else{

docEl.style.fontSize = 100 * (clientWidth / 720) 'px';

}

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

/script>

jQuery手机聊天界面

书写chat.js代码。

script>

/*发送消息*/

function send(headSrc,str){

var html="div class='send'>div class='msg'>img src=" headSrc " />"

"i class='msg_input'>/i>" str "//div>/div>";

upView(html);

}

/*接受消息*/

function show(headSrc,str){

var html="div class='show'>div class='msg'>img src=" headSrc " />"

"i class='msg_input'>/i>" str "//div>/div>";

upView(html);

}

/*更新视图*/

function upView(html){

$('.message').append(html);

$('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)

}

function sj(){

return parseInt(Math.random()*10)

}

$(function(){

$('.footer').on('keyup','input',function(){

if($(this).val().length>0){

$(this).next().css('background','#114F8E').prop('disabled',true);

}else{

$(this).next().css('background','#ddd').prop('disabled',false);

}

})

$('.footer p').click(function(){

show("./images/touxiangm.png",$(this).prev().val());

test();

})

/*测试数据*/

var arr=['我是小Q','好久没联系了！','你在想我么','怎么不和我说话','跟我聊会天吧'];

var imgarr=['images/touxiang.png','images/touxiangm.png']

test()

function test(){

$(arr).each(function(i){

setTimeout(function(){

send("images/touxiang.png",arr[i])

},sj()*500)

})

}

/script>

jQuery手机聊天界面

代码整体结构。

jQuery手机聊天界面

查看效果。

jQuery手机聊天界面

注意事项

jquery.min.js是个js包，可以网上下载。

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY HTML

上一篇：怎么用js自己写一个提示框下一篇：用jquery如何往指定表格插入数字

jQuery手机聊天界面

工具/原料

方法/步骤

注意事项

热门文章

标签列表