jQuery实现聊天对话框

本文实例为大家分享了jQuery实现聊天对话框的具体代码，供大家参考，具体内容如下

效果图：左下角选择对话的角色，在对话框输入消息点击发送按钮，消息显示在上面界面当中，然后对话框内容被清空。

 

  
  
  
  
  
    .talk_con {
      width: 600px;
      height: 500px;
      border: 1px solid #666;
      margin: 50px auto 0;
      background: #f9f9f9;
    }
 
    .talk_show {
      width: 580px;
      height: 420px;
      border: 1px solid #666;
      background: #fff;
      margin: 10px auto 0;
      overflow: auto;
    }
 
    .talk_input {
      width: 580px;
      margin: 10px auto 0;
    }
 
    .whotalk {
      width: 80px;
      height: 30px;
      float: left;
      outline: none;
    }
 
    .talk_word {
      width: 420px;
      height: 26px;
      padding: 0px;
      float: left;
      margin-left: 10px;
      outline: none;
      text-indent: 10px;
    }
 
    .talk_sub {
      width: 56px;
      height: 30px;
      float: left;
      margin-left: 10px;
    }
 
    .atalk {
      margin: 10px;
    }
 
    .atalk span {
      display: inline-block;
      background: #0181cc;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
 
    .btalk {
      margin: 10px;
      text-align: right;
    }
 
    .btalk span {
      display: inline-block;
      background: #ef8201;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
  
  
  

 

  
    
      A：你还好吗？
      B：嗯，你呢？
    
    
      
 A：
 B：
      
      
      
    
  

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。