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

629 阅读 0 评论 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>

文章分类：编程语言
文章TAG：微信聊天界面网页版聊天 html css javascript
浏览：629
发布时间：2024-05-22 15:25:43
文章链接：https://www.662p.com/bcyy/29593

上一个 > 详细介绍：什么是SSR、SSG、CSR？前端渲染技术全解析
下一个 > 全球最全的语言代码表Language codes

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

JavaScript中if嵌套assert的方法

HTML+JavaScript+CSS实现文字逐行显示特效

Vue状态管理库Pinia详解

Webpack 代码分割和懒加载技术

评论 0

发表评论 取消回复

发表评论取消回复