php仿qq聊天界面,jquery仿微信聊天界面
首先看一下我们的效果图。
这个颜色可能搭配的有些不合适,但基本功能大都实现了。就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧。
首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和右侧的界面。然后每个盒子里面包含了三大部分:头部、内容区、和底部。只要写好一侧,另一侧进行粘贴复制就可以了。
首先定义一个大的
来盛放左右两个盒子。
//左侧聊天界面
//右侧聊天界面
首先这两个盒子的代码不是复制粘贴就直接可以的。还必须注意以下不同:
select中的id得不同。我们一般都是
option1
option2
option3
这样使用。而在这儿使用select标签是当你和你同桌聊了一屏的天时,它有滚动条来 上下滑动看你们都聊了些什么。再上面的基础上增加一些css样式,这样界面效果就出来了。
接下来就是要写jquery代码的时候了。首先想一下你在你这边说的话既要出现在你的设备右侧,又要出现在你同桌设备的左侧?
我们先对你的界面左侧进行发消息控制,在写了文本之后,按发送按钮让它出现在你界面的右侧,同时也出现在你同桌设备的左侧。
我们要按照以下步骤来实现:
1。获得你输入的文本框中的内容。
2。生成一个option标签。
2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并 显示。
2.2 对生成的标签进行内容的插入即插入文本框中的内容
3。将option标签追加到你的select中。
4。将option标签在你同桌设备的左侧进行定位显示。
5。清除文本框中的内容。
function sendLeft(){
//1.获得你输入的文本框中的内容。
var text = $("#leftText").val();
//2。生成一个span标签。
var option = $("``");
// 2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并显示。
var len = text.length;
option.css("width", len * 15 + "px");
option.css("marginLeft", 350 - len * 15 - 60 + "px");
//2.2 生成标签的内容
option.html(text);
//3. 将内容追加到select中。
$("#leftcontent").append(option);
//4. 追加生成的标签(右侧)
var option1 = $("");
option1.addClass("optionRight");
option1.css("width", len * 15 + "px");
option1.css("marginLeft", 10 +"px");
option1.html(text);
$("#rightcontent").append(option1);
//5. 清除文本框的内容
$("#leftText").val("");
}
}
同样再对你同桌的设备方进行显示的时候,和左侧的大同小异。
自己写一下就可以。
在写了左侧和右侧发送的消息函数之后,此时还不能进行消息发送,因为还没有进行事件绑定。首先发送消息有两种方式:
①。按钮发送
按钮发送就需要为按钮绑定事件
$("#leftdBtn").bind("click", sendLeft);
$("#rightBtn").bind("click", sendRight);
②。回车发送
$(document).keydown(function(event){
var txt1 = $("#leftText").val();
var txt2 = $("#rightText").val()
if(event.keyCode == 13){
if( txt1.trim() != ""){
sendLeft();
}
if(txt2.trim() != ""){
sendRight();
}
}
});
最后附上完整的源代码:
模仿微信聊天
*{
margin: 0px;
padding: 0px;
}
#main{
width: 90%;
margin: 10px auto;
}
#box{
float: left;
margin:20px 120px;
}
#top{
width: 310px;
padding: 10px 20px;
color: white;
background-color: lightgreen;
font-size: 18px;
font-family: "微软雅黑";
font-weight: bold;
}
#content{
background-color: white;
}
select{
width: 350px;
height: 470px;
background-color: white;
padding: 10px;
border:2px solid red;
}
#bottom{
width: 310px;
background-color: red;
padding: 10px 20px;
}
.sendText{
height: 25px;
width: 210px;
font-size: 16px;
}
.sendBtn{
width: 65px;
height: 30px;
float: right;
background-color: gold;
color: white;
text-align: center;
font-size: 18px;
}
span{
background-color: lightgreen;
color: #000;
padding: 10px 30px;
}
option{
padding: 5px 10px;
margin-top:10px;
border-radius:5px;
width: 10px;
min-height: 20px;
}
.optionRight{
background-color: lightgreen;
}
.optionLeft{
background-color: lightblue;
}
$(function(){
$("#leftdBtn").bind("click", sendLeft);
$("#rightBtn").bind("click", sendRight);
function sendLeft(){
//1. 获取输入框中的内容
var text = $("#leftText").val();
//2. 生成标签
var option = $("");
option.addClass("optionLeft");
//2.1 生成标签的样式
var len = text.length;
//option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
option.css("width", len * 15 + "px");
option.css("marginLeft", 350 - len * 15 - 60 + "px");
//2.2 生成标签的内容
option.html(text);
//3. 将内容追加到select中。
$("#leftcontent").append(option);
//4. 追加生成的标签(右侧)
var option1 = $("");
option1.addClass("optionRight");
option1.css("width", len * 15 + "px");
option1.css("marginLeft", 10 +"px");
option1.html(text);
$("#rightcontent").append(option1);
//5. 清除文本框的内容
$("#leftText").val("");
}
function sendRight(){
//1. 获取输入框中的内容
var text = $("#rightText").val();
//2. 生成标签
var option = $("");
option.addClass("optionLeft");
//2.1 生成标签的样式
var len = text.length;
//option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
option.css("width", len * 15 + "px");
option.css("marginLeft", 350 - len * 15 - 60 + "px");
//2.2 生成标签的内容
option.html(text);
//3. 将内容追加到select中。
$("#rightcontent").append(option);
//4. 追加生成的标签(右侧)
var option1 = $("");
option1.addClass("optionRight");
option1.css("width", len * 15 + "px");
option1.css("marginLeft", 10 +"px");
option1.html(text);
$("#leftcontent").append(option1);
$("#rightText").val("");
}
$(document).keydown(function(event){
var txt1 = $("#leftText").val();
var txt2 = $("#rightText").val()
if(event.keyCode == 13){
if( txt1.trim() != ""){
sendLeft();
}
if(txt2.trim() != ""){
sendRight();
}
}
});
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php仿qq聊天界面,jquery仿微信聊天界面相关推荐
- js模拟群聊天php,jquery仿微信聊天界面实例分享
本文主要为大家详细介绍了jquery仿微信聊天界面的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大 ...
- WPF编程;上位机编程;C#编程;仿QQ基础实现(一)之界面预览
简介 一.摘要 1.描述 2.关键字 二.什么是WPF 三.为什么选择WPF 四.仿QQ的登录界面 五.仿QQ联系人界面 六.源码下载 七.其他 八.参考 一.摘要 1.描述 本文主要描述的是如何通过 ...
- 案例七 、jquery模仿微信聊天界面
首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和 ...
- python远程聊天_python工具,微信聊天、自动回复、手机微信远程控制电脑
功能简介 微信聊天.发送文件 微信忙碌回复 微信机器人回复 微信远程控制电脑 软件截图 python工具,微信聊天.自动回复.手机微信远程控制电脑 python工具,微信聊天.自动回复.手机微信远程控 ...
- 微信聊天新技能!微信聊天彩色字体!个性炫酷~
上一篇关于微信聊天界面个性签名的文章推送以后,有小伙伴留言问微信聊天彩色字体设置方法,就为大家分享一下微信彩色字体~ 首先,下载安装软件[微信炫字体].软件的功能也比较简单,没有任何复杂的设置. 软件 ...
- 微信从原版到现在所有界面图片_微信全部界面背景怎么设置
在新版的微信中,不仅仅是设置一个通用的聊天背景,还可以为每一个不同的聊天人设置不同的背景,怎样设置聊天背景呢,见下文. 为不同的聊天对象设置不同的背景 1.这是新版本微信的功能,对于旧版本请更新到新版 ...
- 微信从原版到现在所有界面图片_微信进入界面的图片有什么含义
展开全部 微信进入界面的图片e5a48de588b63231313335323631343130323136353331333365646262含义如下: 事实上,这是一幅真实的图片.这是用哈苏照相机 ...
- php微信相亲聊天图,相亲对象微信聊天攻略 相亲后的正确发展步骤
相亲对象微信聊天攻略 相亲后的正确发展步骤 作者: 易韋 更新日期: 2019-10-24 20:55:13 相亲一直以来就是一个解决单身问题的好方式,很多适龄男女到了一定年龄还没有对象,就要采取相亲 ...
- android 仿qq群头像,Android仿微信和QQ多图合并框架(类似群头像)的实现方法
Android仿微信和QQ多图合并框架(类似群头像)的实现方法 发布时间:2020-10-21 10:33:03 来源:脚本之家 阅读:97 作者:jyb_96 前言 现在多数app里面加入聊天已经是 ...
最新文章
- 获取当前页面的宽度和高度
- java Opencv 图片修复 Photo
- NOIP2008传纸条[DP]
- Spring注解详解
- 鼠标移动过去变大变绿
- 语音识别:繁华背后,危机初现
- Cortex-M3 的SVC、PendSV异常,与操作系统(ucos实时系统)(转)
- 如何开发一个异常检测系统:如何评价一个异常检测算法
- Taro+react开发(97):问答模块04
- Linux网络那点事
- php调接口post,php模拟post提交请求,调用接口
- jquery删除替换元素remove、detach、empty、replaceWith、replaceAll
- React 入门第一天(小案例和注意细节)
- 翻译: TensorFlow 2.0 中的符号和命令式 API 是什么?
- Matlab将散点绘制为平滑曲线的简单方法
- **恶意代码系列** MS-DOS系统安装
- js图片添加文字水印并设置水印居中的方法
- 一招教你如何改变图片的大小?只需三步简单实用
- python+tensorflow CNN卷积神经网络手写字体识别
- HTML的学习-2|HTML 标签(上)
热门文章
- 怎么给图片添加贴纸?介绍几个简单的方法
- Superl-url:一款开源关键词URL采集工具
- MATLAB 2018a安装教程(迅雷)
- Python地学分析 — GDAL将多个遥感图像叠加保存为tif文件
- TJISE-APP 自动签到打卡
- 小马虎想用计算机计算396乘19,四年级上册数学精选练习题
- 台式电脑怎么添加计算机硬盘,台式机怎么加硬盘 台式机加硬盘教程介绍【图文详解】...
- bbr29_TCP BBR导致性能下降
- 阿里出海遭遇挑战,Lazada三年换三帅仍无法制霸东南亚
- 基于`IRIS`,动态解析`HL7`消息