先上图吧

，

点击头像更换说话对象，简单说下实现原理，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. Spring框架中的单例Beans是线程安全的么

    Spring框架并没有对单例bean进行任何多线程的封装处理.关于单例bean的线程安全和并发问题需要开发者自行去搞定.但实际上,大部分的Spring bean并没有可变的状态(比如Serview类和 ...

  2. leetcode877

    public class Solution { public bool StoneGame(int[] piles) { return true; } } 这问题很不好...

  3. RAD C++Builder xe7 std::map xtree BUG

    c++Builder 6 下的std::map还能用,有代码提示. 换到xe7,代码提示出来就一个tt.operator [](),代码没法往下写了. 最后把Target Platforms切换到64 ...

  4. Git--时光穿梭机之删除文件06

    在Git中,删除也是一个修改操作,我们实际操作一下吧,先添加一个文件test.txt到Git并且提交 $ git add test.txt $ git commit -m "add test ...

  5. @@ERROR和@@ROWCOUNT的用法

    1.         @ERROR 当前一个语句遇到错误,则返回错误号,否则返回0.需要注意的是@ERROR在每一条语句执行后会被立刻重置,因此应该在要验证的语句执行后检查数值或者是将它保存到局部变量 ...

  6. ArcGIS帮助文档VS帮助文档不能复制图片的解决方法

    ArcGIS帮助文档VS帮助文档不能复制图片的解决方法(非常有用)   问题:ArcGIS的学习文档,开发文档,vs的帮助文档,一般都不能复制图片,有的甚至不能复制文本.   解决方法 在文档空白处右 ...

  7. 打劫房屋 · House Robber

    ［抄题］: 假设你是一个专业的窃贼,准备沿着一条街打劫房屋.每个房子都存放着特定金额的钱.你面临的唯一约束条件是:相邻的房子装着相互联系的防盗系统,且 当相邻的两个房子同一天被打劫时,该系统会自动报警 ...

  8. gsm

    libosmocore Osmocom-BB wireshark 拦截一个短信内容

  9. Java 设计模式系列（七）桥接模式

    Java 设计模式系列(七)桥接模式 桥接模式(Bridge)是一种结构型设计模式.Bridge 模式基于类的最小设计原则,通过使用封装.聚合及继承等行为让不同的类承担不同的职责.它的主要特点是把抽象 ...

  10. c语言技术课第一次作业

    读邹欣老师博客关于师生关系有感 1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 答:    在邹欣老师博客中我看到邹欣老师列举了很多师生关系的类型,把这种关系比喻成很 ...