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

顺晟科技

2022-09-13 12:18:17

275

超全版-模拟微信网页版聊天界面(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>

今天就这些啦~~~

上一篇：Vue动态绑定CSS样式下一篇：分享10个很酷的HTML5/CSS3

网站建设

Css

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

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