为了账号安全,请及时绑定邮箱和手机立即绑定

html5仿微博web、微信网页版聊天系统实战开发

标签:
Html5 CSS3

h5仿微信网页端|仿微博web聊天界面|web端聊天室|桌面端聊天系统

html5聊天系统场景应用还是蛮多的,如 在线客服沟通系统、淘宝网页端旺旺等,之前就有开发过h5移动端聊天室,如是就忍不住开发了个仿新浪微博web版聊天项目,功能效果还是蛮不错哒。

使用了html5+css3+jQuery+swiper+wcPop等技术进行开发架构,实现了消息、表情发送,发送图片,还有上传附件及自定义推送内容,另外也加入了个人名片、上传附件、分享等样式,功能上实现了消息、表情的发送,图片、视频全屏预览。

https://img1.sycdn.imooc.com//5c17c7dd0001794713500645.jpg

// 2、设置聊天

$("body").on("click", ".J__setChat", function(e){

    var that = $(this), contextTpl, menuNode = $("<div class='wc__contextmenu animated anim-fadeIn'></div>");

    contextTpl = "<div class='wc__contextmenuSetChat menu'><a class='status online' href='#'>在线</a><a class='status offline' href='#'>离开</a><a class='status busy' href='#'>忙碌</a><a class='status invisible' href='#'>隐身</a><a class='deliver'></a><a href='#'>关闭桌面通知</a><a href='#'>关闭提醒声音</a><a href='#'>退出</a></div>";

    if (!$(".wc__contextmenu").length) {

        $("body").append(menuNode.html(contextTpl));

        posFix();

    } else {

        $(".wc__contextmenu").hide().html(contextTpl).fadeIn(250);

        posFix();

    }

    function posFix() {

        $(".wc__contextmenu").css({

            position: "absolute",

            left: e.pageX,

            top: e.pageY

        });

    }

});

// 删除退群

$("body").on("click", "#J__leaveOutQun", function () {

    var leaveOut = wcPop({

        id: 'wc__LeaveOutQun',

        skin: 'android',

        content: '删除并退出群聊后,将不再接收此群聊的信息?',

        btns: [

            {

                text: '取消',

                onTap() {

                    wcPop.close(leaveOut);

                }

            },

            {

                text: '确定',

                style: 'color:#e64240',

                onTap() {

                    wcPop.closeAll();

                    wcPop({id: 'wcTips', content: '已退出该群聊!', time: 2 });

                }

            }

        ]

    });

});

https://img1.sycdn.imooc.com//5c17cb610001865b13500645.jpg

https://img1.sycdn.imooc.com//5c17cb610001994113500645.jpg

https://img1.sycdn.imooc.com//5c17cb630001df5213500645.jpg

https://img1.sycdn.imooc.com//5c17cb64000151c113500645.jpg

https://img1.sycdn.imooc.com//5c17cb640001072b13500645.jpg

https://img1.sycdn.imooc.com//5c17cb650001a9ca13500645.jpg

https://img1.sycdn.imooc.com//5c17cb66000159bd13500645.jpg

https://img1.sycdn.imooc.com//5c17cb670001255113500645.jpg

https://img1.sycdn.imooc.com//5c17cb67000142f413500645.jpg

https://img1.sycdn.imooc.com//5c17cb6800018dad13500645.jpg

一个仿微博、微信web聊天系统例子完成,可以应用到实际项目中去。

欢迎关注我的个人博客:https://blog.csdn.net/yanxinyun1990

一起学习,一起进步,有问题随时联系,一起解决!!!

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消