h5网页版聊天室|仿微博、微信web版聊天系统


html5仿微博、微信网页端聊天室|pc端聊天系统html5
h5开发的仿微信、微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗插件wcPop.js进行了一次全面api升级,修复编辑器插入表情时光标定位错误bug,新增了上传附件及自定义推送内容,另外也新增了个人名片、上传附件、分享等样式,功能上实现了消息、表情的发送,图片、视频全屏预览。
1289798-20180817004252248-1594238765.png

<div class="wc__scrolling-panel flex1 J__swtChat2AddrBook">
    <div class="wc__slimscroll">
        <!-- 通讯录区 -->
        <ul class="wc__addrBooks clearfix" id="J__addrBooks">
            <li id="A">
                <h2 class="initial wc__borT">A</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img09.jpg" /><span class="name flex1">Aster</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img01.jpg" /><span class="name flex1">Alibaba-马云</span>
                </div>
            </li>
            <li id="B">
                <h2 class="initial wc__borT">B</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img02.jpg" /><span class="name flex1">马丽 ▪ ☀☼㈱</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img03.jpg" /><span class="name flex1">科比-kebi</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img10.jpg" /><span class="name flex1">Bear</span>
                </div>
            </li>
            <li id="C">
                <h2 class="initial wc__borT">C</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img15.jpg" /><span class="name flex1">贾斯汀-比伯</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img05.jpg" /><span class="name flex1">肖蓓海</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img04.jpg" /><span class="name flex1">张小龙</span>
                </div>
            </li>
            <li id="D">
                <h2 class="initial wc__borT">D</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img06.jpg" /><span class="name flex1">张帅帅-shuaiMi</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img07.jpg" /><span class="name flex1">肖凤子</span>
                </div>
            </li>
            <li id="E">
                <h2 class="initial wc__borT">E</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img08.jpg" /><span class="name flex1">Lm杨幂幂</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img11.jpg" /><span class="name flex1">Wqq_王巧巧</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img12.jpg" /><span class="name flex1">杨迪</span>
                </div>
            </li>
            <li id="F">
                <h2 class="initial wc__borT">F</h2>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img13.jpg" /><span class="name flex1">宋小白-sxb2018</span>
                </div>
                <div class="row flexbox flex-alignc wc__material-cell">
                    <img class="uimg" src="img/uimg/u__chat-img14.jpg" /><span class="name flex1">Nice奶思</span>
                </div>
            </li>
        </ul>
        <div class="wc__addrBooks-total">16位联系人</div>
        
        <!-- 右侧字母定位 -->
        <!-- //字母显示 -->
        <div class="wc__addrFriend-showletter">A</div>
        <!-- //26字母 -->
        <div class="wc__addrFriend-floatletter">
            <em>A</em>
            <em>B</em>
            <em>C</em>
            <em>D</em>
            <em>E</em>
            <em>F</em>
            <em>G</em>
            <em>H</em>
            <em>I</em>
            <em>J</em>
            <em>K</em>
            <em>L</em>
            <em>M</em>
            <em>N</em>
            <em>O</em>
            <em>P</em>
            <em>Q</em>
            <em>R</em>
            <em>S</em>
            <em>T</em>
            <em>U</em>
            <em>V</em>
            <em>W</em>
            <em>X</em>
            <em>Y</em>
            <em>Z</em>
        </div>
    </div>
</div>


1289798-20180817004208828-1864401155.png


1289798-20180817004231540-306979538.png


1289798-20180817004244455-2094579975.png


1289798-20180817004252248-1594238765.png


1289798-20180817004259943-1842702011.png


1289798-20180817004307647-2008813474.png


1289798-20180817004322294-1142603221.png


1289798-20180817004329420-2057098500.png


1289798-20180817004336820-1293179408.png


1289798-20180817004348858-1134454077.png


1289798-20180817004355115-358785550.png


欢迎大家一起交流 QQ(282310962) wx(xy190310)
已邀请:

要回复问题请先登录注册

返回顶部