jquery仿微信聊天界面
首先看一下我们的效果图。
这个颜色可能搭配的有些不合适，但基本功能大都实现了。就是你和你同桌对话，你发的消息在你的左侧，而在他设备的右侧。
首先先写好整体的框架，在一个大容器中放两个盒子，分别是左侧和右侧的界面。然后每个盒子里面包含了三大部分：头部、内容区、和底部。只要写好一侧，另一侧进行粘贴复制就可以了。
首先定义一个大的
来盛放左右两个盒子。
<div id = "main"> //左侧聊天界面 <div id = "box"> <div id = "top"><span>你</span></div> <div id = "content"> <select multiple="multiple" id="leftcontent"> </select> </div> <div id = "bottom"> <input type = "text" class = "sendText" id = "leftText" /> <input type = "button" id = "leftdBtn" class="sendBtn" value = "发送"> </div> </div> //右侧聊天界面 <div id = "box"> <div id = "top"><span>同桌</span></div> <div id = "content"> <select multiple="multiple" id="rightcontent"> </select> </div> <div id = "bottom"> <input type = "text" class = "sendText" id = "rightText" /> <input type = "button" id = "rightBtn" class="sendBtn" value = "发送"> </div> </div> </div>
首先这两个盒子的代码不是复制粘贴就直接可以的。还必须注意以下不同：
<div id = "content"> <select multiple="multiple" id="rightcontent"> </select> </div>
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 = $("`<option></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 = $("<option></option>");
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();
}
}
});
最后附上完整的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>模仿微信聊天</title>
<script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
*{
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;
}
</style>
<script>
$(function(){
$("#leftdBtn").bind("click", sendLeft);
$("#rightBtn").bind("click", sendRight);
function sendLeft(){
//1. 获取输入框中的内容
var text = $("#leftText").val();
//2. 生成标签
var option = $("<option></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 = $("<option></option>");
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></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 = $("<option></option>");
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();
}
}
});
})
</script>
</head>
<body>
<div id = "main">
<div id = "box">
<div id = "top"><span>你</span></div>
<div id = "content">
<select multiple="multiple" id="leftcontent">
</select>
</div>
<div id = "bottom">
<input type = "text" class = "sendText" id = "leftText" />
<input type = "button" id = "leftdBtn" class="sendBtn" value = "发送">
</div>
</div>
<div id = "box">
<div id = "top"><span>同桌</span></div>
<div id = "content">
<select multiple="multiple" id="rightcontent">
</select>
</div>
<div id = "bottom">
<input type = "text" class = "sendText" id = "rightText" />
<input type = "button" id = "rightBtn" class="sendBtn" value = "发送">
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery使用ajax实现微信自动回复插件
myscript.js 复制代码 代码如下: var _autorun;var str = new Array('转发什么','分享什么','已转发','已轉發','己转发','继续申请','在不','已发送','以转发','以分享','已分享','yv','bv','gv','pv','rv','你好','美女','索要','代码','我要','要v','要加v');var isrun = false;var i=0;function start(){ console.log('第'+(
-
JavaScript结合Bootstrap仿微信后台多图文界面管理
js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下 效果图: 详细代码: html: <div id="wrap"> <div id="sidebar"> <div class="previewBox"> <!-- <p style="margin:10px 14px 0 14px;"><span class="ms
-
jQuery实现微信长按识别二维码功能
最近一直在搞一个微信开发的项目,终于快要完工了,今天小编抽个时间记录下在项目开发过程中遇到jquery.qrcode.min.js生成二维码长按不识别的解决方法,希望对大家有所帮助! 1.引入JS库 <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.qrcode
-
Jquery 类网页微信二维码图块滚动效果具体实现
首先是自己定制的脚本方法属性代码: 复制代码 代码如下: /* * 创建浮动图片广告(Generate a dock AD image) * * USAGE: * $(selector).higo_plugins_ad({ * src:null, // 广告图片路径 * closeSrc:null, // 关闭图片路径 * href:"#",
-
使用jQuery.wechat构建微信WEB应用
因为最近自己的产品要在微信公众号中推广,需要提供一些有意义的功能,于是被迫走上了支持微信这条不归路. 众所周知,腾讯是那样一个神奇的公司,他们的产品在商业上获得巨大成功,但文档真的很难令人恭维,诺大一个公众号开发平台,我竟然找不到真正的,关于web开发的官方文档,有的就是个别示例,剩下的...呵呵,有一个叫开发者交流互助的东东. 看完上面这个图后,有没有这样的感觉,一帮群众拼命的想知道发生了什么,但就是没有官方声明!o(∩_∩)o 哈哈 说了这么多,赶紧入正题,本期要讲的就是我痛苦中挣扎徘徊后写
-
使用jQuery Rotare实现微信大转盘抽奖功能
很多公司到了年底都会做一些抽奖活动来刺激.吸引.粘住客户,比如抽奖转盘活动. 前几天用一个jqueryRotate插件实现了转盘的效果.比起那些很炫丽的flash是稍逊点,但也基本实现了需求 效果图: 实现这个其实蛮简单的,转动的效果用的jqueryRotate插件,所以只要判断每个奖荐对应的角度,然后设置指针的转动角度就可以了.比如关键的是jqueryRotate这个插件的用法. jqueryRotate的资料: 支持Internet Explorer 6.0+ .Firefox 2.0 .S
-
jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div class="demo"> <div id="disk"></div> <div
-
jquery1.8版本使用ajax实现微信调用出现的问题分析及解决办法
先给大家说下问题背景:最近在做一个项目,开发微信的某个功能,使用的是asp.net开发,jquery1.8.0版本. 在微信中点击按钮触发事件,调用ajax与服务器端进行交互,回调函数走的是error. 分析原因:首先我想到的是返回的数据类型有问题,因为在jquery 版本在1.4以上对json的格式非常严格,需要符合{"target":true,"message":"成功"}这样的格式.用JSON.stringify()函数分析了respons
-
jquery仿微信聊天界面
首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和右侧的界面.然后每个盒子里面包含了三大部分:头部.内容区.和底部.只要写好一侧,另一侧进行粘贴复制就可以了. 首先定义一个大的 来盛放左右两个盒子. <div id = "main"> //左侧聊天界面 <div id = "box"> <
-
react+redux仿微信聊天界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室--reactChatRoom,实现了聊天记录下拉刷新.发送消息.表情(动图),图片.视频预览,打赏.红包等功能. 二.技术栈MVVM框架: react / react-dom状态管理:redux / react-redux页面路由:react-router-dom弹窗插件
-
Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav
-
详解微信小程序实现仿微信聊天界面(各种细节处理)
本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下: 下面先来看看效果 为实现这样的效果,首先要解决两个问题: 1.点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题: 2.键盘弹出或收起时,聊天消息没有自动滚到最底部. 首先解决第二个问题,自动滚动到最底部,这很简单,这里提供三种方法(推荐第三种): 1.计算每条消息的最大高度,设置scroll-top=(单条msg最大高度 * msg条数)px. 2.用 将展示msg的目标scroll-view包裹, 通过js获取到
-
android仿微信聊天界面 语音录制功能
本例为模仿微信聊天界面UI设计,文字发送以及语言录制UI. 1先看效果图: 第一:chat.xml设计 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" andro
-
Android ListView仿微信聊天界面
Android ListView仿聊天界面效果图的具体代码,供大家参考,具体内容如下 1.首先页面总布局(ListView + LinearLayout(TextView+Button)) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="
-
Android仿微信主界面的实现方法
本文实例为大家分享了Android模仿微信主界面展示的具体代码,供大家参考,具体内容如下 先看一下效果图 实现的原理: ViewPager+FragmentPagerAdapter 主界面可分为三部分: top标题栏就是一个TextView 中间的ViewPager作为显示的容器,填充Fragment bottom是一个RadioGroup 这里为了布局的优化,将top和bottom抽取出来 ,然后用include将其导入主布局,如下 <LinearLayout xmlns:android=&quo
-
Android用ActionBar高仿微信主界面的实例代码
经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Android ActionBar完全解析使用官方推荐的最佳导航栏(上)和 Android ActionBar完全解析使用官方推荐的最佳导航
-
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 作者前端是初学者, 请大拿们轻拍. 效果展示: 这种聊天对话的布局模式, 比PC端QQ的那种聊天方式更贴近移动端, 我个人感觉. 需求设定: 让我们先过一遍, 实现该聊天窗口需要支持的一些功能点. • 聊天消息结构和布局 聊天消息包括: 人物(头像)和
-
react native 仿微信聊天室实例代码
一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As