关于js的仿微信表情包

来源：互联网发布：linux找工作编辑：程序博客网时间：2024/06/02 14:48

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

首先到官网下载swiper插件，需要用到的文件有swiper.min.js和swiper.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 onclick=\"$('#mywords').setCaret();$('#mywords').insertAtCaret('" + labFace + '\');"><img src="emotions/f_static_'+ index +'.png" /></li>';        }        strFace += "<li onclick=\"$('#" + 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>

做好的效果如下图

0 0