r2musmile

超全版-模拟微信网页版聊天界面(html+CSS+js)

最近一个小订单要做微信网页版的商城客服中心,做了个还不错的界面,稍稍模拟了微信那种样式 不过也加了自己的想法~先上效果图:

废话不多说 上代码!!!

1.页面引入基本布局

<body>
  <div id="leftDemo" >
        基础版
        <div class="topContainer"></div>
	</div>
  <div id="rightDemo" >
        json版
        <div class="topContainer"></div>
  </div>
</body>

  

2.引入相关样式

 

  /*基础样式*/
  .topContainer{
    border-radius: 5px;
    border: 2px solid #ccc;
    height: 500px;
    padding: 10px;
  }
  #leftDemo, #rightDemo{
    width:400px;
    display: inline-block;
    margin: 30px auto 30px 200px;
  }
  #rightDemo{
    float: right;
    margin: 30px 200px 0 0;
  }

  .outContainer{
    position: relative;
  }
  .outContainer:not(:first-child){
    margin-top: 20px;
  }

  /* 消息框通用样式*/
  .messInRight{
    text-align: right;
  }

  .left, .right, .faceImg{
    display: inline-block;
  }
  .left{
    width: 32px;
    top: 0;
  }
  .right{
    margin-left: 15px;
  }
  .faceImg{
    position: absolute;
    top: 0;
  }
  .faceImgInRight{
    right: -5px;
  }
	.messContent{
    color: #fff;
    font-size: 14px;
  }

  .contentDetail{
    display: inline-block;
    background-color: #00FF7F;
    padding: 5px 12px;
    border-radius: 15px;
  }
  

  .contentDetail:not(:first-child){
    margin-top: 2px;
  }

  .contentDetail:first-child{
    border-bottom-left-radius: 0;
  }

  .contentDetail:last-child{
    border-bottom-left-radius: 15px;
    border-top-left-radius: 0;
  }

  .contentDetail:not(:first-child):not(:last-child){
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  
  
  /*右侧消息框样式*/
  .messInRight .contentDetail:first-child{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0;
  }
  .messInRight .contentDetail:last-child{
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 0;
  }
  .messInRight .contentDetail:not(:first-child):not(:last-child){
    border-radius: 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
  }

  .contentDetail:first-child:last-child{
    border-radius: 15px;
  }

  .faceImg img{
    width:32px;
    border-radius:16px;
  }

  /*小表情样式*/
  .smile1{
    background:url(\'emoji.jpg\') no-repeat;
    width: 14px;
    height: 16px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 2px;
  }
  /*background-position 可根据小表情在大图的位置中对应做调整*/
  .smile2{
    background:url(\'emoji.jpg\') no-repeat;
    background-position: -32px -16px;
    width: 14px;
    height: 16px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 2px;
  }

  .smile3{
    background:url(\'emoji.jpg\') no-repeat;
    background-position: -16px 0;
    width: 14px;
    height: 16px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 2px;
  }

  .smile4{
    background:url(\'emoji.jpg\') no-repeat;
    background-position: -16px -16px;
    width: 14px;
    height: 16px;
    display: inline-block;
    vertical-align: -2px;
    margin-left: 2px;
  }

 

 

3.利用JavaScript脚本动态渲染页面

a. 这里先来个基础版的

  // 第一版:源码(即页面左侧)
  function loadLeft() {
    var tplHtl = `<div class="outContainer">
          <div class="left">  
            <div class="faceImg">
              <img src="touxiang1.jpg"/>
            </div>
          </div>
          <div class="right">  
            <div class="messContent">
              <span class="contentDetail">hello 我是大灰灰<span class="smile1"></span></span><br>
              <span class="contentDetail"><span class="smile2"></span>请大家多指教哇</span><br>
              <span class="contentDetail">嘻嘻嘻</span>
            </div>
          </div>
        </div>
        <div class="outContainer messInRight">
          <div class="right">  
            <div class="messContent">
              <span class="contentDetail">哇塞塞<span class="smile4">,欢迎欢迎~</span><br>
              <span class="contentDetail"><span class="smile2">我是小灰哦</span><br>
              <span class="contentDetail">^o^</span>
            </div>
          </div>
          <div class="left">  
            <div class="faceImg faceImgInRight">
              <img src="touxiang2.jpeg"/>
            </div>
          </div>
        </div>
        <div class="outContainer">
          <div class="left">  
            <div class="faceImg">
              <img src="touxiang3.jpg"/>
            </div>
          </div>
          <div class="right">  
            <div class="messContent">
              <span class="contentDetail">热烈欢迎加入越秃越强大家庭!!!</span>
            </div>
          </div>
        </div>
        <div class="outContainer messInRight">
          <div class="right">  
            <div class="messContent">
              <span class="contentDetail">哈哈哈~</span><br>
              <span class="contentDetail">加油干,小可爱们</span>
            </div>
          </div>
          <div class="left">  
            <div class="faceImg faceImgInRight">
              <img src="touxiang2.jpeg"/>
            </div>
          </div>
        </div>`;
    $(\'#leftDemo .topContainer\').html(tplHtl);
  }
  loadLeft();

b. 因为与后台交互时都是传的json数据的,所以为了童鞋们方便,就顺便发个json升级版,上面只是让童鞋们看看原来代码是怎么样的,也好理解啦!!

  // 第二升级版:使用json(即页面右侧)
  function loadRight() {
    // touxiang 表示头像链接   
    // content 表示消息框内容 mess消息内容 littleEmo表示小表情对应的class
    // isMe 表示是否自己发的(\'Y\' 是)  也就是消息框在右边
    var jsonData = [
      {"touxiang":"touxiang1.jpg", "content": [{"mess":"hello 我是大蓝", "littleEmo":"smile1"},{"mess":"请大家多指教哇", "littleEmo":"smile2"},{"mess":"嘻嘻嘻", "littleEmo":"smile4"}]},
      {"touxiang":"touxiang2.jpeg", "content": [{"mess":"哇塞塞,欢迎欢迎~"}, {"mess":"我是小灰哦", "littleEmo":"smile2"}], "isMe": "Y"},
      {"touxiang":"touxiang3.jpg", "content": [{"mess":"热烈欢迎加入越秃越强大家庭!!!"}]},
      {"touxiang":"touxiang2.jpeg", "content": [{"mess":"哈哈哈~"},{"mess":"加油干,小可爱们"}], "isMe": "Y"}
    ];
    
    var tplHtl = ``;
    $(jsonData).each(function(index, messEle){
        if(messEle.isMe !== \'Y\'){
          tplHtl += `<div class="outContainer">
            <div class="left">  
              <div class="faceImg">
                <img src="${messEle.touxiang}"/>
              </div>
            </div>
            <div class="right">
              <div class="messContent">`;
          $(messEle.content).each(function(ind, ele){
            if(ind > 0){
              tplHtl += `<br>`;
            }
            tplHtl += `<span class="contentDetail">${ele.mess}`;
            if(ele.littleEmo){
              tplHtl += `<span class="${ele.littleEmo}"></span>`;
            }
            tplHtl += `</span>`;
          });
          tplHtl += `</div></div></div>`;
        }else{
          tplHtl += `<div class="outContainer messInRight">
            <div class="right">
              <div class="messContent">`;
          $(messEle.content).each(function(ind, ele){
            if(ind > 0){
              tplHtl += `<br>`;
            }
            tplHtl += `<span class="contentDetail">${ele.mess}`;
            if(ele.littleEmo){
              tplHtl += `<span class="${ele.littleEmo}"></span>`;
            }
            tplHtl += `</span>`;
          });
          tplHtl += `</div></div>
              <div class="left">  
                <div class="faceImg faceImgInRight">
                  <img src="${messEle.touxiang}"/>
                </div>
              </div>
            </div>`;
        }
    });
    $(\'#rightDemo .topContainer\').html(tplHtl);
  }

  loadRight();

  

4.对咯 小伙伴们图片都可以自己加   最后记得加<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>

 

今天就这些啦~~~

分类:

技术点:

相关文章: