1. 首页
  2. 博客
  3. 编程语言

超全版-类似微信WEB网页版聊天界面(html+CSS+js)

20 阅读 0 评论

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

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>


点赞(0)
从上往下垂直时间轴CSS样式代码
从上往下垂直时间轴CSS样式代码
60个非常实用的CSS代码片段
60个非常实用的CSS代码片段
JavaScript 中 property 和 attribute 的区别
JavaScript 中 property 和 attribute 的区别
怎样用css实现字母大小写
怎样用css实现字母大小写

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论 返回
顶部