关于js的仿微信表情包

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yjwu5353/article/details/68945458

分享一个半成品,关于qq表情包的制作,利用swiper插件。

首先到官网下载swiper插件,需要用到的文件有swiper.min.jsswiper.min.css文件。如果你的页面加载了jQuery.js或者zepto.js,你可以选择使用更轻便的swiper.jquery.min.js

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="swiper-3.4.2.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .swiper-slide{
            width: 100%;
            height: 12rem;
            background-color: #f2f4f8;
        }
        .swiper-slide ul{
            padding-left: 1rem;

        }
        .swiper-slide li{
            list-style: none;
            float: left;
        }

        .swiper-slide li img{
            width: 2rem;
            height: 2rem;
            padding: 0.5rem;
        }
        .chat-input{
            position: relative;
        }
        #mywords{
            width: 10rem;
            height: 2rem;
        }
    </style>
</head>

<input type="text" id="mywords" maxlength="140" placeholder=" 说点什么吧..."/>
<div class="swiper-container">
    <div class="swiper-wrapper">

    </div>
    <div class="swiper-pagination"></div>
</div>

<script src="jquery-3.1.1.min.js"></script>
<script src="swiper-3.4.2.jquery.min.js"></script>
<script>
    jQuery.fn.extend({
        setCaret: function() {
            if (!/msie/.test(navigator.userAgent.toLowerCase())) return;
            var initSetCaret = function() {
                var textObj = $(this).get(0);
                textObj.caretPos = document.selection.createRange().duplicate();
            };
            $(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret);
        },
        insertAtCaret: function(textFeildValue) {
            var textObj = $(this).get(0);
            if (document.all && textObj.createTextRange && textObj.caretPos) {
                var caretPos = textObj.caretPos;
                caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) === "" ? textFeildValue + "" : textFeildValue;
            } else if (textObj.setSelectionRange) {
                var rangeStart = textObj.selectionStart;
                var rangeEnd = textObj.selectionEnd;
                var tempStr1 = textObj.value.substring(0, rangeStart);
                var tempStr2 = textObj.value.substring(rangeEnd);
                textObj.value = tempStr1 + textFeildValue + tempStr2;
                var len = textFeildValue.length;
                textObj.setSelectionRange(rangeStart + len, rangeStart + len);
                $(this).focus();
            } else {
                textObj.value += textFeildValue;
            }
        },
        deleteCaret: function() {
            var textObj = $(this), val = textObj.val(), reg = /(\[[^@]{1,3}\])$/;
            if (reg.test(val)) val = val.replace(reg, ""); else val = val.substring(0, val.length - 1);
            textObj.val(val);
            textObj.blur();
        }
    });
    var strFace = '';
    var labFace;
    var option = 'mywords';
    for (var i = 1;i <=5;i++) {     //遍历5个<div class="swiper-slide"></div>
        strFace += '<div class="swiper-slide"><ul>';
        for (var j = 1; j <= 20; j++) {      //遍历表情,每页显示20个
            var index = (i - 1) * 20 + j;
            labFace = getFace_index(index);
            if (!labFace) {
                continue;
            }
            strFace += "<li οnclick=\"$('#mywords').setCaret();$('#mywords').insertAtCaret('" + labFace + '\');"><img src="emotions/f_static_'+ index +'.png" /></li>';
        }
        strFace += "<li οnclick=\"$('#" + option + '\').deleteCaret();" ><img src="emotions/faceDelete@2x.png"></li></ul></div>';
//        strFace += '<li><img src="emotions/faceDelete@2x.png"></li></ul></div>';
    }
    $('.swiper-wrapper').append(strFace)

        function getFace_index(val) {
            var list = [], face_list = {
                "[微笑]": 1,
                "[撇嘴]": 2,
                "[]": 3,
                "[发呆]": 4,
                "[得意]": 5,
                "[流泪]": 6,
                "[害羞]": 7,
                "[闭嘴]": 8,
                "[]": 9,
                "[]": 10,
                "[尴尬]": 11,
                "[发怒]": 12,
                "[调皮]": 13,
                "[呲牙]": 14,
                "[惊讶]": 15,
                "[难过]": 16,
                "[]": 17,
                "[]": 18,
                "[抓狂]": 19,
                "[]": 20,
                "[偷笑]": 21,
                "[愉快]": 22,
                "[白眼]": 23,
                "[傲慢]": 24,
                "[饥饿]": 25,
                "[]": 26,
                "[惊恐]": 27,
                "[流汗]": 28,
                "[憨笑]": 29,
                "[悠闲]": 30,
                "[奋斗]": 31,
                "[咒骂]": 32,
                "[疑问]": 33,
                "[]": 34,
                "[]": 35,
                "[疯了]": 36,
                "[]": 37,
                "[骷髅]": 38,
                "[敲打]": 39,
                "[再见]": 40,
                "[擦汗]": 41,
                "[抠鼻]": 42,
                "[鼓掌]": 43,
                "[糗大了]": 44,
                "[坏笑]": 45,
                "[左哼哼]": 46,
                "[右哼哼]": 47,
                "[哈欠]": 48,
                "[鄙视]": 49,
                "[委屈]": 50,
                "[快哭了]": 51,
                "[阴险]": 52,
                "[亲亲]": 53,
                "[]": 54,
                "[可怜]": 55,
                "[菜刀]": 56,
                "[西瓜]": 57,
                "[啤酒]": 58,
                "[篮球]": 59,
                "[乒乓]": 60,
                "[咖啡]": 61,
                "[]": 62,
                "[猪头]": 63,
                "[玫瑰]": 64,
                "[凋谢]": 65,
                "[嘴唇]": 66,
                "[爱心]": 67,
                "[心碎]": 68,
                "[蛋糕]": 69,
                "[闪电]": 70,
                "[炸弹]": 71,
                "[]": 72,
                "[足球]": 73,
                "[瓢虫]": 74,
                "[便便]": 75,
                "[月亮]": 76,
                "[太阳]": 77,
                "[礼物]": 78,
                "[拥抱]": 79,
                "[]": 80,
                "[]": 81,
                "[握手]": 82,
                "[胜利]": 83,
                "[抱拳]": 84,
                "[勾引]": 85,
                "[拳头]": 86,
                "[差劲]": 87,
                "[爱你]": 88,
                "[NO]": 89,
                "[OK]": 90
            };
            if (typeof val === "string") return face_list[val];
            if (typeof val === "number") {
                for (var i in face_list) list[face_list[i]] = i;
                return list[val];
            }
            return false;
        }
    var mySwiper = new Swiper('.swiper-container',{
        pagination : '.swiper-pagination'
    });
</script>

做好的效果如下图


展开阅读全文

没有更多推荐了,返回首页