多样动画片效果等源码,h5仿微信聊天

By admin in 4858美高梅 on 2019年4月1日

明天开发了一款4858美高梅,多样动画片效果等源码,h5仿微信聊天。手提式有线电话机端h5仿微信聊天,人仅仅不停学习才能向上,那段时光倒腾着整理了下从前项目,又再次在本来的那版基础上支出了一款仿微信聊天电脑端web版本,聊天页面又再一次优化了多图预览、摄像播放,右键菜单menu,聊天底部编辑器模块重新优化源码,弹窗则是一连选取从前自身支付的wcPop.js,具体看档次效益图吧!

此前做过一版h5微信聊天移动端,那段日子闲来无事就整治了下从前项目,又再度在原先的那版基础上晋级了下,如是就有了明日的h5仿微信聊天高仿版,新增了微聊、通信录、探索、作者四个模块
左右触摸滑屏切换,聊天页面优化了多图预览、录制播放,长按菜单UI,聊天底部编辑珍视新优化整治(新增多表情),弹窗则用到了温馨付出的wcPop.js,具体看项目效能图吧!

iOS精选源码

iOS精选源码

节奏播放控件

仿写《博客园》的tag选拔页面

奥德赛SChat(此前微信写的仿微信项目)

可在app中展现的决定台框架GHConsole

鹏哥哥Video

iOS三种奇特的layer动画合集

支撑点赞数字动画的SPScrollNumLabel

鹏堂哥加密

鹏四哥联合浮动

广告栏控件,帮助本地缓存,
帮忙当地图片互连网图片GIFt格式

效果图:

html代码片段:

节奏播放控件

4858美高梅 1

iOS优质博客

ReactNative
仿美团项目

明日公司iOS项目完毕了,在闲暇时候想起一下上七个月写过的ReactNative
仿美团项目,感觉好久好久没有再动过ReactNative混合方式了,对于ReactNative中ES6相当科班出身,在这段时光大致每一日都用Flex
ES6语法糖来写手提式有线电话机端页面,对于web前端手提式有线话机页面也有了肯定的打听,为了ReactNative项…读书原来的书文

适配iOS11&中兴X的局地坑

前阵子项目开支忙成狗,就径直没做iOS11的适配,直到Xcode土霉素版宣布后,笔者胸有成竹的在OPPOX上跑起项目,整个人都凉透了…下边总计一下我境遇的坑,不是很周到,日后补给。导航栏导航栏中度的变化iOS11事先河航栏默许中度为64pt(那里高度指statusBar
+
NavigationBar),iOS11…阅读原来的书文

iOS进阶–App耗能优化看那篇就够了

一款好的App一定要有分外好的用户体验,那一点早便是超越八分之四开发者的共识。功耗是用户体验中2个生死攸关的组成都部队分,但那部分因为种种题材,很多时候会被大家忽略。从前公司让自个儿在里面搞个耗电优化的培养和磨练,但本人发觉网上有关的小说非常少,而且大多不系统,也不够权威。索性找到苹果官方文书档案,边翻译边收拾,就有了此处小说。内容有点长,大家能够…开卷原著

从 YYCache 源码 Get
到怎么筹划叁个完好无损的缓存

前言iOS
开发中总会用到各个缓存,可是各位有没有考虑过什么的缓存才能被喻为非凡的缓存,也许说非凡的缓存应该负有何特质? 闭上眼睛,想一想假诺面试官让你设计二个缓存你会怎么回复?本文将结合
YYCache 的源码稳步带我们找到答案。YYCache
是3个线程安全的高质量键值缓存(该品种是 YYK…读书原来的小说

iOS
内购最新讲解

一.总说内购的内容协议、税务和银行业务音信填写内购商品的添加添加沙盒测试账号内购代码的切实可行落到实处内购的注意事项二.斟酌、税务和行务消息填写2.一 、协议、税务和行务 音信填写 的进口协议、税务和银行业务音信填写
的入口2.② 、选取申请合同项目 进入商谈、税务和行务页面后,会有3种合同项目,借使您…开卷原来的书文

越来越多源码

愈多博文

4858美高梅 2

<!-- //微聊底部功能面板 -->
<div class="wc__footTool-panel">
    <!-- 输入框模块 -->
    <div class="wc__editor-panel wc__borT flexbox">
        <div class="wrap-editor flex1"><div class="editor J__wcEditor" contenteditable="true"></div></div>
        <i class="btn btn-emotion"></i>
        <i class="btn btn-choose"></i>
        <button class="btn-submit J__wchatSubmit">发送</button>
    </div>

    <!-- 表情、选择模块 -->
    <div class="wc__choose-panel wc__borT" style="display: none;">
        <!-- 表情区域 -->
        <div class="wrap-emotion" style="display: none;">
            <div class="emotion__cells flexbox flex__direction-column">
                <div class="emotion__cells-swiper flex1" id="J__swiperEmotion">
                    <div class="swiper-container">
                        <div class="swiper-wrapper"></div>
                        <div class="pagination-emotion"></div>
                    </div>
                </div>
                <div class="emotion__cells-footer" id="J__emotionFootTab">
                    <ul class="clearfix">
                        <li class="swiperTmpl cur" tmpl="swiper__tmpl-emotion01"><img src="img/emotion/face01/face-lbl.png" alt="4858美高梅 3"></li>
                        <li class="swiperTmpl" tmpl="swiper__tmpl-emotion02"><img src="img/emotion/face02/face-lbl.gif" alt="4858美高梅 4"></li>
                        <li class="swiperTmpl" tmpl="swiper__tmpl-emotion03"><img src="img/emotion/face03/face-lbl.gif" alt="4858美高梅 5"></li>
                        <li class="swiperTmpl" tmpl="swiper__tmpl-emotion04"><img src="img/emotion/face04/face-lbl.gif" alt="4858美高梅 6"></li>
                        <li class="swiperTmpl" tmpl="swiper__tmpl-emotion05"><img src="img/emotion/face05/face-lbl.gif" alt="4858美高梅 7"></li>
                        <li class="swiperTmpl" tmpl="swiper__tmpl-emotion06"><img src="img/emotion/face06/face-lbl.gif" alt="4858美高梅 8"></li>
                        <li class="swiperTmplSet"><img src="img/wchat/icon__emotion-set.png" alt="4858美高梅 9"></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 选择区域 -->
        <div class="wrap-choose" style="display: none;">
            <div class="choose__cells">
                <ul class="clearfix">
                    <li><a class="J__wchatZp" href="javascript:;"><img src="img/wchat/icon__choose-zp.png" /><input type="file" accept="image/*" /><em>照片</em></a></li>
                    <li><a class="J__wchatSp" href="javascript:;"><img src="img/wchat/icon__choose-sp.png" /><input type="file" accept="video/*" /><em>视频</em></a></li>
                    <li><a class="J__wchatHb" href="javascript:;"><img src="img/wchat/icon__choose-hb.png" /><em>红包</em></a></li>
                    <li><a class="J__wchatSc" href="javascript:;"><img src="img/wchat/icon__choose-sc.png" /><em>我的收藏</em></a></li>
                    <li><a class="J__wchatWj" href="javascript:;"><img src="img/wchat/icon__choose-wj.png" /><em>文件</em></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="wc__choosePanel-tmpl">
    <!-- //红包模板.begin -->
    <div id="J__popupTmpl-Hongbao" style="display:none;">
        <div class="wc__popupTmpl tmpl-hongbao">
            <i class="wc-xclose"></i>
            <ul class="clearfix">
                <li class="item flexbox">
                    <label class="txt">总金额</label><input class="ipt-txt flex1" type="tel" name="hbAmount" placeholder="0.00" /><em class="unit">元</em>
                </li>
                <li class="item flexbox">
                    <label class="txt">红包个数</label><input class="ipt-txt flex1" type="tel" name="hbNum" placeholder="填写个数" /><em class="unit">个</em>
                </li>
                <li class="tips">在线人数共<em class="memNum">186</em>人</li>
                <li class="item item-area">
                    <textarea class="describe" name="content" placeholder="恭喜发财,大吉大利"></textarea>
                </li>
                <li class="amountTotal">¥<em class="num">0.00</em></li>
            </ul>
        </div>
    </div>
    <!-- //红包模板.end -->
</div>
仿写《博客园》的tag选拔页面

4858美高梅 10

4858美高梅 11

Js代码片段:

酷威SChat(在此之前微信写的仿微信项目)

4858美高梅 12

4858美高梅 13

// ...长按弹出菜单
$("#J__chatMsgList").on("longTap", "li .msg", function(e){
    var that = $(this), menuTpl, menuNode = $("<div class='wc__chatTapMenu animated anim-fadeIn'></div>");
    that.addClass("taped");
    that.parents("li").siblings().find(".msg").removeClass("taped");
    var isRevoke = that.parents("li").hasClass("me");
    var _revoke = isRevoke ? "<a href='#'><i class='ico i4'></i>撤回</a>" : "";

    if(that.hasClass("picture")){
        console.log("图片长按");
        menuTpl = "<div class='menu menu-picture'><a href='#'><i class='ico i1'></i>复制</a><a href='#'><i class='ico i2'></i>收藏</a><a href='#'><i class='ico i3'></i>另存为</a>"+ _revoke +"<a href='#'><i class='ico i5'></i>删除</a></div>";
    }else if(that.hasClass("video")){
        console.log("视频长按");
        menuTpl = "<div class='menu menu-video'><a href='#'><i class='ico i3'></i>另存为</a>" + _revoke +"<a href='#'><i class='ico i5'></i>删除</a></div>";
    }else{
        console.log("文字长按");
        menuTpl = "<div class='menu menu-text'><a href='#'><i class='ico i1'></i>复制</a><a href='#'><i class='ico i2'></i>收藏</a>" + _revoke +"<a href='#'><i class='ico i5'></i>删除</a></div>";
    }

    if(!$(".wc__chatTapMenu").length){
        $(".wc__chatMsg-panel").append(menuNode.html(menuTpl));
        autoPos();
    }else{
        $(".wc__chatTapMenu").hide().html(menuTpl).fadeIn(250);
        autoPos();
    }

    function autoPos(){
        console.log(that.position().top)
        var _other = that.parents("li").hasClass("others");
        $(".wc__chatTapMenu").css({
            position: "absolute",
            left: that.position().left + parseInt(that.css("marginLeft")) + (_other ? 0 : that.outerWidth() - $(".wc__chatTapMenu").outerWidth()),
            top: that.position().top - $(".wc__chatTapMenu").outerHeight() - 8
        });
    }
});
可在app中显示的支配台框架GHConsole

4858美高梅 14

4858美高梅 15

效果图:

鹏哥哥Video

4858美高梅 16

4858美高梅 17

4858美高梅 18

iOS三种特有的layer动画合集

4858美高梅 19

4858美高梅 20

4858美高梅 21

支撑点赞数字动画的SPScrollNumLabel

4858美高梅 22

4858美高梅 23

4858美高梅 24

鹏三哥加密

4858美高梅 25

4858美高梅 26

4858美高梅 27

鹏四哥联合浮动

4858美高梅 28

// ...表情、选择区切换
$(".wc__editor-panel").on("click", ".btn", function(){
    var that = $(this);
    $(".wc__choose-panel").show();
    if (that.hasClass("btn-emotion")) {
        $(".wc__choose-panel .wrap-emotion").show();
        $(".wc__choose-panel .wrap-choose").hide();
        // 初始化swiper表情
        !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");
    } else if (that.hasClass("btn-choose")) {
        $(".wc__choose-panel .wrap-emotion").hide();
        $(".wc__choose-panel .wrap-choose").show();
    }
    wchat_ToBottom();
});

// ...处理编辑器信息
var $editor = $(".J__wcEditor"), _editor = $editor[0];
function surrounds(){
    setTimeout(function () { //chrome
        var sel = window.getSelection();
        var anchorNode = sel.anchorNode;
        if (!anchorNode) return;
        if (sel.anchorNode === _editor ||
            (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === _editor)) {

            var range = sel.getRangeAt(0);
            var p = document.createElement("p");
            range.surroundContents(p);
            range.selectNodeContents(p);
            range.insertNode(document.createElement("br")); //chrome
            sel.collapse(p, 0);

            (function clearBr() {
                var elems = [].slice.call(_editor.children);
                for (var i = 0, len = elems.length; i < len; i++) {
                    var el = elems[i];
                    if (el.tagName.toLowerCase() == "br") {
                        _editor.removeChild(el);
                    }
                }
                elems.length = 0;
            })();
        }
    }, 10);
}
// 格式化编辑器包含标签
_editor.addEventListener("click", function () {
    //$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
    surrounds();
}, true);
_editor.addEventListener("input", function(){
    surrounds();
}, false);
// 点击表情
$("#J__swiperEmotion").on("click", ".face-list span img", function(){
    var that = $(this), range;

    if(that.hasClass("face")){ //小表情
        var img = that[0].cloneNode(true);
        _editor.focus();
        _editor.blur(); //输入表情时禁止输入法

        setTimeout(function(){
            if(document.selection && document.selection.createRange){
                document.selection.createRange().pasteHTML(img);
            }else if(window.getSelection && window.getSelection().getRangeAt){
                range = window.getSelection().getRangeAt(0);
                range.insertNode(img);
                range.collapse(false);

                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }, 10);
    }else if(that.hasClass("del")){ //删除
        _editor.focus();
        _editor.blur(); //输入表情时禁止输入法

        setTimeout(function(){
            range = window.getSelection().getRangeAt(0);
            range.collapse(false);

            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
            document.execCommand("delete");
        }, 10);
    } else if(that.hasClass("lg-face")){ //大表情
        var _img = that.parent().html();
        var _tpl = [
            '<li class="me">\
                <div class="content">\
                    <p class="author">Nice奶思</p>\
                    <div class="msg lgface">'+ _img + '</div>\
                </div>\
                <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\
            </li>'
        ].join("");
        $chatMsgList.append(_tpl);

        wchat_ToBottom();
    }
});

<!-- //微聊消息上墙面板 -->
<div class="wc__chatMsg-panel flex1">
    <div class="wc__slimscroll2">
        <div class="chatMsg-cnt">
            <ul class="clearfix" id="J__chatMsgList">
                <li class="time">2017年12月28日 晚上21:10</li>
                <li class="notice">"<a href="#">Aster</a>"通过扫描"<a href="#">张小龙</a>"分享的二维码加入群聊</li>
                <li class="time">2017年12月28日 晚上23:15</li>
                <li class="notice">"<a href="#">雷军</a>"通过扫描"<a href="#">李彦宏</a>"分享的二维码加入群聊</li>
                <li class="notice">当前群聊人数较多,已显示群成员昵称,同时为了信息安全,请注意聊天隐私</li>

                <li class="time">2017年12月31日 晚上22:30</li>
                <!-- 别人-->
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img01.jpg" /></a>
                    <div class="content">
                        <p class="author">马云(老子天下第一)</p>
                        <div class="msg">
                            hello 各位女士、先生,欢迎大家来到达摩派,进群后记得修改备注哈~~ 名字+公司/职业/机构 <img class="face" src="img/emotion/face01/29.png"><img class="face" src="img/emotion/face01/71.png"><img class="face" src="img/emotion/face01/75.png">
                        </div>
                    </div>
                </li>
                <!--自己-->
                <li class="me">
                    <div class="content">
                        <p class="author">Nice奶思</p>
                        <div class="msg">
                            么么哒,马总发个红包呗!
                        </div>
                    </div>
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
                </li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a>
                    <div class="content">
                        <p class="author">MR(马蓉 ▪ ☀☼㈱)</p>
                        <div class="msg">
                            马总,晚上好哇,还木休息呢。我还在景区度假呢,棒棒! <img class="face" src="img/emotion/face01/69.png">
                        </div>
                    </div>
                </li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img02.jpg" /></a>
                    <div class="content">
                        <p class="author">MR(马蓉 ▪ ☀☼㈱)</p>
                        <div class="msg picture">
                            <img class="img__pic" src="img/placeholder/wchat__img03.jpg" />
                        </div>
                    </div>
                </li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img12.jpg" /></a>
                    <div class="content">
                        <p class="author">Flowers(杨迪)</p>
                        <div class="msg">
                            哼,要红包。 <img class="face" src="img/emotion/face01/63.png">
                        </div>
                    </div>
                </li>
                <li class="time">1月1日 早上02:00</li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img04.jpg" /></a>
                    <div class="content">
                        <p class="author">Xlong(张小龙)</p>
                        <div class="msg">
                            小程序后台新增推广功能,支持开发者添加与业务相关的自定义关键词!<br>
                            <a href="https://mp.weixin.qq.com/cgi-bin/wx">https://mp.weixin.qq.com/cgi-bin/wx</a>
                        </div>
                    </div>
                </li>
                <li class="me">
                    <div class="content">
                        <p class="author">Nice奶思</p>
                        <div class="msg">
                            小龙哥好敬业哇,牛牛牛!<img class="face" src="img/emotion/face01/79.png">
                        </div>
                    </div>
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
                </li>
                <li class="me">
                    <div class="content">
                        <p class="author">Nice奶思</p>
                        <div class="msg video">
                            <img class="img__video" src="img/placeholder/wchat__video02-poster.jpg" videoUrl="img/placeholder/wchat__video02-Y7qk5uVcNcFJIY8O4mKzDw.mp4" />
                        </div>
                    </div>
                    <a class="avatar" href="好友主页(详细资料).html">
                        <img src="img/uimg/u__chat-img14.jpg" />
                    </a>
                </li>
                <li class="time">2月25日 早上09:48</li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img06.jpg" /></a>
                    <div class="content">
                        <p class="author">Robin(李彦宏)</p>
                        <div class="msg">
                            早上好,各位,这次人机交互线下活动的视频及PPT预计明天可以公开啦 <img class="face" src="img/emotion/face01/4.png">
                        </div>
                    </div>
                </li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img15.jpg" /></a>
                    <div class="content">
                        <p class="author">King(李嘉诚)</p>
                        <div class="msg">
                            这个不错,支持下~ <img class="face" src="img/emotion/face01/42.png">
                        </div>
                    </div>
                </li>
                <li class="time">3月12日 下午14:28</li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img03.jpg" /></a>
                    <div class="content">
                        <p class="author">Jay(周杰伦)</p>
                        <div class="msg">
                            我的新专辑《告白气球》将于6.1上线,到时希望大家多多支持啦~ <img class="face" src="img/emotion/face01/66.png">
                        </div>
                    </div>
                </li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img11.jpg" /></a>
                    <div class="content">
                        <p class="author">Luci(王巧巧)</p>
                        <div class="msg picture">
                            <img class="img__pic" src="img/placeholder/wchat__img01.jpg" />
                        </div>
                    </div>
                </li>
                <li class="time">"马云(老子天下第一)" 撤回了一条消息</li>
                <li class="others">
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img11.jpg" /></a>
                    <div class="content">
                        <p class="author">Luci(王巧巧)</p>
                        <div class="msg video">
                            <img class="img__video" src="img/placeholder/wchat__video01-poster.jpg" videoUrl="img/placeholder/wchat__video01-Y7qk5uVcNcFJIY8O4mKzDw.mp4" />
                        </div>
                    </div>
                </li>
                <li class="time">"Luci(王巧巧)" 已被移出群聊</li>
                <li class="me">
                    <div class="content">
                        <p class="author">Nice奶思</p>
                        <div class="msg picture">
                            <img class="img__pic" src="img/placeholder/wchat__img02.jpg">
                        </div>
                    </div>
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
                </li>
                <li class="me">
                    <div class="content">
                        <p class="author">Nice奶思</p>
                        <div class="msg">
                            北京新世纪饭店发放福利啦,免费领取VIP会员,大家快去参与吧。
                        </div>
                    </div>
                    <a class="avatar" href="好友主页(详细资料).html"><img src="img/uimg/u__chat-img14.jpg" /></a>
                </li>
            </ul>
        </div>
    </div>
</div>

4858美高梅 29

广告栏控件,协助本地缓存, 扶助当地图片互连网图片GIFt格式

4858美高梅 30

 

4858美高梅 31

iOS优质博客

4858美高梅 32

4858美高梅 33

ReactNative 仿美团项目

今日公司iOS项目达成了,在悠然时候想起一下上7个月写过的ReactNative
仿美团项目,感觉好久好久没有再动过ReactNative混合格局了,对于ReactNative中ES6相当熟谙,在这段日子大约每日都用Flex
ES6语法糖来写手提式无线话机端页面,对于web前端手提式有线电话机页面也有了一定的打听,为了ReactNative项…
阅读原来的文章

4858美高梅 34

4858美高梅 35

适配iOS11&诺基亚X的有的坑

前阵子项目开发忙成狗,就径直没做iOS11的适配,直到Xcode地霉素版发布后,小编胸有成竹的在小米X上跑起项目,整个人都凉透了…上面总括一下自己遇见的坑,不是很完美,日后补给。导航栏导航栏高度的变化iOS11事初步航栏暗中同意高度为64pt(那里中度指statusBar

  • NavigationBar),iOS11…
    翻阅最初的小说

4858美高梅 36

4858美高梅 37

iOS进阶–App功耗优化看那篇就够了

一款好的App一定要有相当好的用户体验,那或多或少曾经是大多数开发者的共同的认识。耗能是用户体验中1个关键的组成部分,但这一部分因为种种题材,很多时候会被世家忽略。以前集团让自家在里边搞个耗能优化的作育,但本人发觉网上有关的篇章十一分少,而且基本上不系统,也不够权威。索性找到苹果官方文书档案,边翻译边收拾,就有了那里文章。内容有点长,大家能够…
开卷原来的小说

4858美高梅 38

从 YYCache 源码 Get 到如何统一筹划八个妙不可言的缓存

前言iOS
开发中总会用到各类缓存,不过各位有没有考虑过怎么样的缓存才能被称作卓绝的缓存,也许说卓绝的缓存应该负有何特质? 闭上眼睛,想一想假设面试官让您设计三个缓存你会怎么应对?本文将结合
YYCache 的源码稳步带大家找到答案。YYCache
是三个线程安全的高质量键值缓存(该类型是 YYK…
读书原作

 

iOS 内购最新讲解

一.总说内购的情节协议、税务和行务音信填写内购商品的添加添加沙盒测试账号内购代码的切实落到实处内购的注意事项二.说道、税务和行务音讯填写2.① 、协议、税务和银行业务 音信填写 的入口协议、税务和银行业务音讯填写
的输入2.二 、选择申请合同项目 进入商谈、税务和银行业务页面后,会有3种合同项目,假使你…
开卷原来的文章

  • 越多源码

  • 越多博文

4858美高梅 39

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有