微信开发 web 端聊天项目实战|仿微信 wechat 聊天界面

xiaoyan2015 · 2018年07月08日 · 108 次阅读

使用html5+css3开发的仿微信客户端项目,可以实现多人互动聊天,自定义动图表情、右键菜单...

更多详细介绍可访问:https://blog.csdn.net/xiaoyan_2015

<!-- …… 图片预览弹窗.Start -->
<div class="wc__popup-imgPreview" style="display: none;">
    <div class="swiper-container J__swiperImgPreview">
        <div class="swiper-wrapper"></div>
        <!-- <div class="swiper-pagination pagination-imgPreview"></div> -->
    </div>
</div>
<script type="text/javascript">
    var curIndex = 0, imgPreviewSwiper;
    $("#J__chatMsgList li").on("click", ".picture", function(){
        var html = "",  _src = $(this).find("img").attr("src");

        $("#J__chatMsgList li .picture").each(function(i, item){
            html += '<div class="swiper-slide"><div class="swiper-zoom-container">'+ $(this).html() +'</div></div>';
            if($(this).find("img").attr("src") == _src){
                curIndex = i;
            }
        });
        $(".J__swiperImgPreview .swiper-wrapper").html(html);
        $(".wc__popup-imgPreview").show();

        imgPreviewSwiper = new Swiper('.J__swiperImgPreview',{
            pagination: false,
            paginationClickable: true,
            zoom: true,
            observer: true,
            observeParents: true,
            initialSlide: curIndex
        });
    });
    // 关闭预览
    $(".wc__popup-imgPreview").on("click", function(e){
        var that = $(this);
        imgPreviewSwiper.destroy(true, true);
        $(".J__swiperImgPreview .swiper-wrapper").html('');
        that.hide();
    });
</script>
<!-- …… 图片预览弹窗.End -->

<!-- …… 视频预览弹窗.Start -->
<div class="wc__popup-videoPreview" style="display: none;">
    <i class="wc__videoClose"></i>
    <video id="J__videoPreview" width="100%" height="100%" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline preload="auto"></video>
</div>
<script type="text/javascript">
    var video = document.getElementById("J__videoPreview");
    $("#J__chatMsgList li").on("click", ".video", function(){
        video.src = $(this).find("img").attr("videoUrl");
        $(".wc__popup-videoPreview").show();
        if(video.paused){
            video.play();
        }else{
            video.pause();
        }
    });
    video.addEventListener("ended", function(){
        video.currentTime = 0;
    }, false);
    // 关闭预览
    $(".wc__popup-videoPreview").on("click", ".wc__videoClose", function(){
        $(".wc__popup-videoPreview").hide();
        video.currentTime = 0;
        video.pause();
    });

    // 进入全屏、退出全屏
    video.addEventListener("x5videoenterfullscreen", function(){
        console.log("进入全屏");
    }, false);
    video.addEventListener("x5videoexitfullscreen", function(){
        $(".wc__popup-videoPreview .wc__videoClose").trigger("click");
    }, false)
</script>
<!-- …… 视频预览弹窗.End -->

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册