先上图吧

，

点击头像更换说话对象，简单说下实现原理，html中创建一个ul用于存放所有说话的内容，对话内容是有javascript 动态生成，

主要难点：先布局好css，当时奥巴马发送时候，让这个li有浮动，当是小胖时候，让这个li左浮动。

代码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>模拟短信发送</title>

     <style>

         * {

             margin: 0;

             padding: 0;

             list-style: none;

             font-family: '微软雅黑'

         }

         #container {

             width: 450px;

             height: 780px;

             background: #eee;

             margin: 80px auto 0;

             position: relative;

             box-shadow: 20px 20px 55px #777;

         }

         .header {

             background: #000;

             height: 34px;

             color: #fff;

             line-height: 34px;

             font-size: 20px;

             padding: 0 10px;

         }

         .footer {

             width: 430px;

             height: 50px;

             background: #666;

             position: absolute;

             bottom: 0;

             padding: 10px;

         }

         .footer input {

             width: 275px;

             height: 45px;

             outline: none;

             font-size: 20px;

             text-indent: 10px;

             position: absolute;

             border-radius: 6px;

             right: 80px;

         }

         .footer span {

             display: inline-block;

             width: 62px;

             height: 48px;

             background: #ccc;

             font-weight: 900;

             line-height: 45px;

             cursor: pointer;

             text-align: center;

             position: absolute;

             right: 10px;

             border-radius: 6px;

         }

         .footer span:hover {

             color: #fff;

             background: #999;

         }

         #icon {

             display: inline-block;

             background: red;

             width: 60px;

             height: 60px;

             border-radius: 30px;

             position: absolute;

             bottom: 6px;

             left: 14px;

             cursor: pointer;

             overflow: hidden;

         }

         img {

             width: 60px;

             height: 60px;

         }

         .content {

             font-size: 20px;

             width: 435px;

             height: 662px;

             overflow: auto;

             padding: 5px;

         }

         .content li {

             margin-top: 10px;

             padding-left: 10px;

             width: 412px;

             display: block;

             clear: both;

             overflow: hidden;

         }

         .content li img {

             float: left;

         }

         .content li span{

             background: #7cfc00;

             padding: 10px;

             border-radius: 10px;

             float: left;

             margin: 6px 10px 0 10px;

             max-width: 310px;

             border: 1px solid #ccc;

             box-shadow: 0 0 3px #ccc;

         }

         .content li img.imgleft {

             float: left;

         }

         .content li img.imgright {

             float: right;

         }

         .content li span.spanleft {

             float: left;

             background: #fff;

         }

         .content li span.spanright {

             float: right;

             background: #7cfc00;

         }

     </style>

     <script>

         window.onload = function(){

             var arrIcon = ['img/1.jpg','img/2.jpg'];

             var num = 0;     //控制头像改变

             var iNow = -1;    //用来累加改变左右浮动

             var icon = document.getElementById('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');

             icon[0].onclick = function(){

                 if(num==0){

                     this.src = arrIcon[1];

                     num = 1;

                 }else if(num==1){

                     this.src = arrIcon[0];

                     num = 0;

                 }

             }

             btn.onclick = function(){

                 if(text.value ==''){

                     alert('发送内容不能为空');

                 }else {

                     content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';

                     iNow++;

                     if(num==0){

                         img[iNow].className += 'imgright';

                         span[iNow].className += 'spanright';

                     }else {

                         img[iNow].className += 'imgleft';

                         span[iNow].className += 'spanleft';

                     }

                     text.value = '';

                 }

             }

         }

     </script>

 </head>

 <body>

     <div id="container">

         <div class="header">

             <span style="float: left;">白超华-博客园</span>

             <span style="float: right;">20:30</span>

         </div>

         <ul class="content"></ul>

         <div class="footer">

             <div id="icon">

                 <img src="img/1.jpg" alt="">

             </div>

             <input id="text" type="text" placeholder="说点什么吧...">

             <span id="btn">发送</span>

         </div>

     </div>

 </body>

 </html>

仿微信聊天面板制作 javascript的更多相关文章

  1. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  2. CSS3 仿微信聊天小气泡

    今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...

  3. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  4. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  5. iOS 即时通讯 + 仿微信聊天框架 + 源码

    这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...

  6. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  7. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  8. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  9. PHP 之CI框架+GatewayWorker+AmazeUI低仿微信聊天网页版

    html5开发的仿微信网页版聊天,采用html5+css3+jquery+websocket+amazeui等技术混合架构开发,实现了微信网页版的主要功能. 一.效果图 二.前端参考代码 <!D ...

随机推荐

  1. hibench学习

    hibench包含几个hadoop的负载 micro benchmarksSort:使用hadoop randomtextwriter生成数据,并对数据进行排序. Wordcount:统计输入数据中每 ...

  2. C# user32.dll

    #region User32.dll 函数 /// <summary> /// 该函数检索一指定窗口的客户区域或整个屏幕的显示设备上下文环境的句柄,以后可以在GDI函数中使用该句柄来在设备 ...

  3. Tessnet2 a .NET 2.0 Open Source OCR assembly using Tesseract engine

    http://www.pixel-technology.com/freeware/tessnet2/ Tessnet2 a .NET 2.0 Open Source OCR assembly usin ...

  4. WebLogic Server StuckThreadMaxTime value is exceeded during configuration

    WebLogic Server StuckThreadMaxTime value is exceeded during configuration If you are configuring Web ...

  5. LevelDB Cache

    [LevelDB Cache] The contents of the database are stored in a set of files in the filesystem and each ...

  6. linux主机名

    [linux主机名] 1.查看主机名 主机名即是一台主机的名字,在终端窗口中输入命令:hostname或uname –n,均可以查看到当前主机的主机名. 2.临时修改主机名 命令行下运行命令:“hos ...

  7. python：dist-packages && site-packages

    先简单描述下问题.我用的ubuntu,源码编译安装的python3.我安装一些库,需要通过apt-get方式安装,这个时候就会遇到python找不到这些库的问题. 有个文章可以简单看看:http:// ...

  8. 40. Combination Sum II (Back-Track)

    Given a collection of candidate numbers (C) and a target number (T), find all unique combinations in ...

  9. [转]使用GetIfTable获取MIB_IFTABLE和MIB_IFROW获取网络接口信息

    #include <iphlpapi.h> #pragma comment ( lib, "iphlpapi.lib") 使用GetIfTable()获取各个端口信息的 ...

  10. Java设计模式(9)——观察者模式

    一.观察者模式定义 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段,使某个 ...