威尼斯人线上娱乐

【威尼斯人线上娱乐】js从0早先思量表情插件,图片加载

27 4月 , 2019  

js从0初叶思虑表情插件

2016/07/28 · JavaScript
· 插件

正文笔者: 伯乐在线 –
陈被单
。未经小编许可,禁止转发!
招待参与伯乐在线 专栏撰稿人。

前言:

由于集团支付项目需求运用表情插件,在网络百度了旷日持久,许多神采插件,都以急需引用好些个js文件,也从不现有的demo能够使用,还有部分插件是引用大多图片,每贰个神采都要重新请求一下。为了那样1个效率,要引进诸多js,img,也是节外生枝……

为此,博主自个儿码了多少个娇小玲珑的“表情插件”,方便现在项目一直行使。

demo 地址:

功能

功用:传递表情对应的字符格式到后台,后台重回字符串,前端将该字符串解析突显成相应的神色展示在页面上。

行使方法:

在option中配备必要的参数

JavaScript

var option = { emojiArray: [‘angry’],
//填写表情字符串的数组,【注:源文件image上面包车型地铁Logo,只须求写红框内的字符串,详见下图】
textareaId: ’emoji-editor’, //输入框的id loadId: ‘load’, //加载表情的id
emojiContainer: ’emojiContainer’,  //存款和储蓄表情的容器对象 sendId: ‘send’,
   //发送新闻的按键 id emojiTranslateCls:’emoji-comment’,
//须要转变到表情(img)的容器类名,只供给增多三个类,就可以自动将:kissing_heart:渲染成表情~
}; /*调用方法*/ var text = new Emoji(option); text.init();

1
2
3
4
5
6
7
8
9
10
11
var option = {
    emojiArray: [‘angry’],     //填写表情字符串的数组,【注:源文件image下面的图标,只需要写红框内的字符串,详见下图】
    textareaId: ’emoji-editor’,   //输入框的id
    loadId: ‘load’,                //加载表情的id
    emojiContainer: ’emojiContainer’,     //存储表情的容器对象
    sendId: ‘send’,                      //发送信息的按钮 id
    emojiTranslateCls:’emoji-comment’,    //需要转换成表情(img)的容器类名,只需要添加一个类,即可自动将:kissing_heart:渲染成表情~
};
/*调用方法*/
var text = new Emoji(option);
text.init();

威尼斯人线上娱乐 1

大概效果截图:(ui方面能够依赖各自须求开始展览美化)

威尼斯人线上娱乐 2

点击发送后,发送给后台的数码是:
威尼斯人线上娱乐 3

表情插件的多少个原理:

  • 何以呈现表情?

CSS
Pepsi-Colas(图片整合技巧),先设定好背景Logo,然后定义每叁个小Logo的position,width,height,就可以展现想要呈现的表情。

里头遇到的难题:怎样支配展现表情的大大小小?
第3想到的是background-size那么些点子,可是要再一次定义它的position,卓殊耗费“体力”,
新生,听君一席话胜读拾年书,发现七个天性transform: scale(一.五);
调控当前因素缩放比率,哈哈,一行代码就化解啦~想要表情大,照旧小,尺寸不及意?通通1行代码化解

  • 如何在输入框中展现表情Logo?

一开首是选项 input 的textarea,可是,将表情img
“append”到这么些输入框后边,也不曾显得出这一个Logo,后来尝试了div,再“append”之后,开掘能够得逞展现表情,不过div又无法输入文字,无果……

开首主张:使用input监听,将textarea值实时加到div中,一样的,那一个也是疑难不捧场~继续研究……

后来察觉三个异常的大众的性质。contenteditable=”true”,又欢快的接纳了contenteditable。

1开首是用span承载表情Logo,可是用div大概span标签放置图像,则contenteditable会暗中同意加到结尾的div/span中……,所以会招致输入表情图标后,再输入文字,最终的文字会在终极2个div/span中,导致没有出示文字。可以吗……真是心累……

既然div/span 不可能,就应用img标签承载表情,那下终于能够平常输入了。

【contenteditable有多个主题材料,它辅助富文本,不安全,而且用户体验倒霉。】

譬如说:用户粘贴的时候,会自行带格式,例子如下:

威尼斯人线上娱乐 4

那边是运用网络大神的壹段代码,去除掉富文本功效,具体参考:某大神博文

  • 何以对图纸和文字进行转变?

那时将在采纳强劲的正则了,先用html()获取内容,再对剧情张开始拍片卖。

调换到文字:

JavaScript

content.replace(/<img\b[^>]*/, imgObj[j])
//相称全部的<img />,替换到相应的格式 imgObj.push(format +
img[i].getAttribute(“alt”) + format); //这里的format作者使用的是:
所以就是类似那样 :fearful: 的格式

1
2
content.replace(/<img\b[^>]*/, imgObj[j])         //匹配所有的<img />,替换成相应的格式
imgObj.push(format + img[i].getAttribute("alt") + format);    //这里的format我使用的是:  所以就是类似这样 :fearful:   的格式

转换到图片:

JavaScript

var keys = ‘\\+1|-一|100|十九|1234|捌ball|a|ab|abc|abcd|accept……’
//那里只列出部分 regex = new RegExp(‘:(‘ + keys + ‘):’, ‘g’), //
相称格式形如那标准的格式 :拾0: $(obj[i]).html().replace(regex,
emoji) //替换 function emoji() { var key = arguments[1]; return
‘<img src=”” alt=”‘ + key + ‘”class=”emoji emoji_’ + key + ‘”/>’;
//重回对应的img格式 }

1
2
3
4
5
6
7
var keys = ‘\\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……’      //这里只列出部分
regex = new RegExp(‘:(‘ + keys + ‘):’, ‘g’),      // 匹配格式形如这样子的格式 :100:
$(obj[i]).html().replace(regex, emoji)   //替换
function emoji() {
    var key = arguments[1];
    return ‘<img src="" alt="’ + key + ‘"class="emoji emoji_’ + key + ‘"/>’;    //返回对应的img格式
}

全部插件的代码格式,也是相比较广泛的包装格局

【威尼斯人线上娱乐】js从0早先思量表情插件,图片加载。JavaScript

//Emoji对象可变的属性 function Emoji(option) { this.emoji =
option.emojiArray, this.textareaId = option.textareaId, this.loadId =
option.loadId, this.sendId = option.sendId, this.emojiContainer =
option.emojiContainer, this.emojiTranslateCls =
option.emojiTranslateCls; }

1
2
3
4
5
6
7
8
9
//Emoji对象可变的属性
function Emoji(option) {
    this.emoji = option.emojiArray,
    this.textareaId = option.textareaId,
    this.loadId = option.loadId,
    this.sendId = option.sendId,
    this.emojiContainer = option.emojiContainer,
    this.emojiTranslateCls = option.emojiTranslateCls;
}

//每贰次生成2个实例,上边的特性都会再一次生成1遍,那样对于固定的办法,会多占用部分内部存款和储蓄器。那样既不环境保护,也贫乏功用。所以能够把那多少个不改变的习性和形式,直接定义在prototype对象上。那时全部固定的章程,其实都以同叁个内存地址,指向prototype对象,因此就提升了运维作用。

JavaScript

Emoji.prototype = { init: function () { //放一些开头化的秘技this.toEmoji(); this.loadEmoji(); this.bind伊芙nt(); }, bind伊芙nt:
function () {}, toEmoji: function () {}, //服务器数据调换来表情 toText:
function () {} //调换来文字 loadEmoji: function () {} //加载表情 }

1
2
3
4
5
6
7
8
9
10
11
Emoji.prototype = {
    init: function () {   //放一些初始化的方法
        this.toEmoji();
        this.loadEmoji();
        this.bindEvent();
    },
    bindEvent: function () {},
    toEmoji: function () {},   //服务器数据转换成表情
    toText: function () {}   //转换成文字
    loadEmoji: function () {} //加载表情
}

好啊,那样贰个神情插件正是完工了,系不系很简短?目前权且供给注重jquery,之后假如有精力的话继续捣鼓3个基于原生js的O(∩_∩)O,具体的兑当代码在github上。
最后,附上github地址:威尼斯人线上娱乐,
欢迎star,fork~~~

附:秋招要起来了,有未有大神有好办事推荐~~

打赏辅助笔者写出更加多好小说,多谢!

打赏作者

前言:

前言: 

图片预加载,图片加载

打赏援助小编写出越来越多好文章,谢谢!

任选一种支付办法

威尼斯人线上娱乐 5
威尼斯人线上娱乐 6

1 赞 5 收藏
评论

由于公司支付项目必要运用表情插件,在英特网百度了旷日持久,繁多神采插件,都以急需引用大多js文件,也从没现有的demo能够采纳,还有部分插件是引用大多图形,每3个神采都要重新请求一下。为了那样1个成效,要引进繁多js,img,也是横生枝节……

鉴于百货店支出品种供给动用表情插件,在网络百度了遥遥无期,大多表情插件,都以索要引用很多js文件,也从没现有的demo能够运用,还有一对插件是援引大多图片,每叁个表情都要重复请求一下。为了那样2个成效,要引进多数js,img,也是得不偿失……

壹、未采纳预加载技能前

威尼斯人线上娱乐 7<!DOCTYPE
html> <html lang=”zh-CN”> <head> <meta
charset=”UTF-8″> <title>图片预加载之冬日加载</title>
<style> .box { text-align: center; } .btn { display: inline-block;
height: 30px; line-height: 30px; border: 1px solid #ccc; background:
#fff; padding: 0 10px; margin-right: 50px; color: #333; } a {
text-decoration: none; } .btn:hover { background-color: #b5b5b5; }
</style> <script src=”js/jquery-3.2.1.js”></script>
</head> <body> <div class=”box”> <img
src=””
alt=”pic” id=”img” width=”900″/> <p> <a href=”javascript:;”
class=”btn” data-control=”prev”>上一页</a> <a
href=”javascript:;” class=”btn” data-control=”next”>下一页</a>
</p> </div> <script> var imgs = [
“”,
“”,
“”,
“”,
“”,
“”,
“”,
“”,
“”,
“”
]; var index = 0, len = imgs.length; $(‘.btn’).on(“click”, function ()
{ if (‘prev’ === $(this).data(‘control’)) {//上一张 index = Math.max(0,
–index); } else {//下一张 index = Math.min(len – 1, ++index); }
document.title = (index + 1) + ‘/’ + len; $(“#img”).attr(‘src’,
imgs[index]); }) </script> </body> </html> View Code

有关笔者:陈被单

威尼斯人线上娱乐 8

热爱前端,应接调换
个人主页 ·
小编的小说 ·
19 ·
  

威尼斯人线上娱乐 9

故而,博主本人码了2个娇小玲珑的“表情插件”,方便现在项目一贯行使。

 

贰、使用图片的严节预加载本事

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载</title>
    <style>
        html, body {
            height: 100%;
        }

        .box {
            text-align: center;
        }

        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            background: #fff;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }

        a {
            text-decoration: none;
        }

        .btn:hover {
            background-color: #b5b5b5;
        }

        .loading {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #eee;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
        }

        .progress {
            margin-top: 300px;
        }
    </style>
    <script
            src="js/jquery-3.2.1.js"></script>
</head>
<body>
<!--加载页-->
<div class="loading">
    <p class="progress">0%</p>
</div>
<div class="box">
    <img src="http://www.bkjia.com/uploads/allimg/170517/161ZA132-1.jpg"
         alt="pic" id="img" width="900"/>

    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>


    </p>
</div>

<script>
    var imgs = [
        "http://www.bkjia.com/uploads/allimg/170517/161ZA132-1.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIS8d1ABmgDYbGTm4AAH9HgDVQJkAGaAl653.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbKIYXwYAA3k8MKqRbcAAH9HgDu4L4ADeUI140.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIHSPXABHf7cWFpNwAAH9HgD8xcYAEeAF788.png",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbKIeIlZAAnxiXety0IAAH9HgEOpcsACfGh744.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIX4p4ABNtzPOq83gAAH9HgEYl2wAE23k650.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJ1auzbKIdDRhABqMJC8YI_sAAH9HgEsBVAAGow8388.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbOIF7dTABn5-3IG-s8AAH9HgFGkYwAGfoT769.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzbOIadTUABUmZqHccD0AAH9HgFgi58AFSZ-104.jpg",
        "http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/08/0A/ChMkJ1i9XJmIJnFtABXosJGWaOkAAae8QGrHE8AFejI057.jpg"

    ];
    /**
     * 按钮点击响应
     */
    var index = 0,
            len = imgs.length,
            count = 0,//记录加载了几张图片
            $progress = $(".progress"),
            $loading = $(".loading");
    $('.btn').on("click", function () {
        if ('prev' === $(this).data('control')) {//上一张
            index = Math.max(0, --index);
        } else {//下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $("#img").attr('src', imgs[index]);
    })
    /*预加载遍历*/
    /*注意这里用count计算来判断图片是否加载完,而不用i变量,因为每张图片加载完成时间不一样*/
    $.each(imgs, function (i, item) {
        var imgObj = new Image();
        $(imgObj).on("load error", function () { //图片没有正常加载页可以正确处理
            //每加载完一张图片需要做的处理
            count++;
            $progress.html(Math.round(count / len) * 100 + "%");//Math.round四舍五入转为整数
            console.log(count);
            //图片全部加载完需要做的处理
            if (count >= len) {
                $loading.hide();
                document.title = '1/' + len; //表示当前是第一张

            }
        });
        $(imgObj).attr("src", item);
    })
</script>
</body>
</html>

功能

所以,博主自身码了三个秀气的“表情插件”,方便未来项目平昔动用

3、把冬季预加载写成jQuery插件

写成插件让其独具复用性

preload.js

威尼斯人线上娱乐 10/** *
Created by xiaoyanliu on 2017/5/17. */ /** * 图片预加载 */
(function ($) { /** * 用OOP的构造函数来写 * @constructor */
function Preload(imgs, options) { /*第一步:初始化*/ this.imgs =
(typeof imgs === “string”) ? [imgs] :
imgs;//即便有一张图纸能够流传字符串,将它包裹成数组
/*opts是流传的options和暗许值DEFAULTS的玉石俱焚,若传入使用传入的值,未有传到使用暗许值*/
/*将后1个蒙眼下1个的内容,产生2个新的对象,将新目标回来给this.opts保存下来*/
this.opts = $.extend({}, Preload.DEFAULTS, options);
/*其次步:执行冬日加载的点子*/
this._unordered();//那些法子只在其中接纳,不在外部调用 } /*暗中认可参数*/
Preload.DEFAULTS = { each: null,//每一张图纸加载实现后推行 all:
null//全体图片加载完结后试行 } /*第三步:写方法*/ /** *
方法都写在原型上,那样往往往往实例化能够共用壹份 */
Preload.prototype._unordered = function () {//冬辰加载
console.log(“调用严节加载”); var imgs = this.imgs, opts = this.opts,
count = 0, len = imgs.length; /*预加载遍历*/
/*瞩目那里用count总结来判定图片是还是不是加载完,而不用i变量,因为每张图纸加载成功时间不均等*/
$.each(imgs, function (i, item) { if (typeof item != ‘string’)
return;//图片地址不是字符串,就不管理 var imgObj = new Image();
$(imgObj).on(“load error”, function () {
//图片未有健康加载页能够精确管理 //每加载完一张图片必要做的拍卖 count++;
opts.each && opts.each(count); //图片全体加载完供给做的处理 if (count
>= len) { opts.all && opts.all(); } }); $(imgObj).attr(“src”, item);
}) } $.extend({ preload: function (imgs, opts) { new Preload(imgs,
opts); } }); })(jQuery); View
Code

调用插件落成效益:

    /*调用插件实现预加载*/
    $.preload(imgs, {
        each: function (count) {
            $progress.html(Math.round(count / len) * 100 + "%");//Math.round四舍五入转为整数
        },
        all: function () {
            $loading.hide();
            document.title = '1/' + len; //表示当前是第一张
        }
    });

完整html

威尼斯人线上娱乐 11<!DOCTYPE
html> <html lang=”zh-CN”> <head> <meta
charset=”UTF-八”> <title>图片预加载之冬辰加载</title>
<style> html, body { height: 百分百; } .box { text-align: center; }
.btn { display: inline-block; height: 30px; line-height: 30px; border:
一px solid #ccc; background: #fff; padding: 0 10px; margin-right: 50px;
color: #333; } a { text-decoration: none; } .btn:hover {
background-color: #b5b5b5; } .loading { position: fixed; left: 0; top:
0; width: 100%; height: 100%; background-color: #eee; text-align:
center; font-size: 30px; font-weight: 700; } .progress { margin-top:
300px; } </style> <script
src=”js/jquery-3.2.1.js”></script> <script
src=”js/preload.js”></script> </head> <body>
<!–加载页–> <div class=”loading”> <p
class=”progress”>0%</p> </div> <div class=”box”>
<img src=””
alt=”pic” id=”img” width=”900″/> <p> <a href=”javascript:;”
class=”btn” data-control=”prev”>上一页</a> <a
href=”javascript:;” class=”btn” data-control=”next”>下一页</a>
</p> </div> <script> var imgs = [
“”,
“”,
“”,
“”,
“”,
“”,
“”,
“”,
“”,
“”
]; /** * 按钮点击响应 */ var index = 0, len = imgs.length, count =
0,//记录加载了几张图片 $progress = $(“.progress”), $loading =
$(“.loading”); $(‘.btn’).on(“click”, function () { if (‘prev’ ===
$(this).data(‘control’)) {//上一张 index = Math.max(0, –index); } else
{//下一张 index = Math.min(len – 一, ++index); } document.title = (index

  • 1) + ‘/’ + len; $(“#img”).attr(‘src’, imgs[index]); })
    /*调用插件落成预加载*/ $.preload(imgs, { each: function (count) {
    $progress.html(Math.round(count / len) * 100 +
    “%”);//Math.round四舍伍入转为整数 }, all: function () { $loading.hide();
    document.title = ‘1/’ + len; //表示近日是第一张 } }); </script>
    </body> </html> View
    Code

 

作用:传递表情对应的字符格式到后台,后台再次回到字符串,前端将该字符串解析显示成相应的神色显得在页面上。

 

4、有序加载

威尼斯人线上娱乐 12<!DOCTYPE
html> <html lang=”zh-CN”> <head> <meta
charset=”UTF-8″> <title>图片预加载之有序加载</title>
<style> body { background-color: #eee; } .box { text-align:
center; } .btn { display: inline-block; height: 30px; line-height: 30px;
border: 1px solid #ccc; background: #fff; padding: 0 10px;
margin-right: 50px; color: #333; } a { text-decoration: none; }
.btn:hover { background-color: #b5b5b5; } </style> <script
src=”js/jquery-3.2.1.js”></script> <script
src=”js/preload.js”></script> </head> <body>
<div class=”box”> <img src=”images/order/1.jpg” alt=”pic”
id=”img” width=”900″/> <p> <a href=”javascript:;”
class=”btn” data-control=”prev”>上一页</a> <a
href=”javascript:;” class=”btn” data-control=”next”>下一页</a>
</p> </div> <script> /*技巧*/ var imgs = []; for
(var i = 0; i < 6; i++) { imgs[i] = ‘images/order/’ + (i + 1) +
‘.jpg’; } /** * 开关点击响应 */ var len = imgs.length, index =
0,//开关点击当前第几张 count = 0;//记录加载了几张图片
/*递归完毕有序加载*/ function load() { var imgObj = new Image();
$(imgObj).on(“load error”, function () { if (count >= len) {
//全数图片已经加载完结 } else { load(); count++; } }); imgObj.src =
imgs[count]; } ; load(); $(‘.btn’).on(“click”, function () { if
(‘prev’ === $(this).data(‘control’)) {//上一张 index = Math.max(0,
–index); } else {//下一张 index = Math.min(len – 1, ++index); }
document.title = (index + 1) + ‘/’ + len; $(“#img”).attr(‘src’,
imgs[index]); }) </script> </body> </html> View Code

威尼斯人线上娱乐 13

 

使用办法:

style=”color: #ff0000;”>功能

五、将一如既往加载到场到插件中

终极包括了1如既往加载和冬辰加载的插件

/**
 * Created by xiaoyanliu on 2017/5/17.
 */
/**
 * 图片预加载
 */
(function ($) {
    /**
     * 用OOP的构造函数来写
     * @constructor
     */
    function Preload(imgs, options) {
        /*第一步:初始化*/
        this.imgs = (typeof imgs === "string") ? [imgs] : imgs;//如果有一张图片可以传入字符串,将它包装成数组
        /*opts是传入的options和默认值DEFAULTS的融合,若传入使用传入的值,没有传入使用默认值*/
        /*将后一个覆盖前一个的内容,形成一个新的对象,将新对象返回给this.opts保存下来*/
        this.opts = $.extend({}, Preload.DEFAULTS, options);
        /*第二步:通过判断执行无序加载的方法*/
        if (this.opts.order === "ordered") {//执行有序预加载
            this._ordered();
        } else {
            this._unordered();//这个方法只在内部使用,不在外部调用
        }

    }

    /*默认参数*/
    Preload.DEFAULTS = {
        order: 'unordered',//默认情况使用无序加载
        each: null,//每一张图片加载完毕后执行
        all: null//全部图片加载完毕后执行
    }
    /*第三步:写方法*/
    /**
     * 方法都写在原型上,这样多次多次实例化可以共用一份
     */
    Preload.prototype._ordered = function () {//有序预加载
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;
        load();
        /*递归实现有序加载*/
        function load() {
            var imgObj = new Image();
            $(imgObj).on("load error", function () {
                opts.each && opts.each(count);
                if (count >= len) {
                    //所有图片已经加载完毕
                    opts.all && opts.all();
                } else {
                    load();
                    count++;
                }
            });
            imgObj.src = imgs[count];
        };
    },


        Preload.prototype._unordered = function () {//无序加载
            console.log("调用无序加载");
            var imgs = this.imgs,
                opts = this.opts,
                count = 0,
                len = imgs.length;
            /*预加载遍历*/
            /*注意这里用count计算来判断图片是否加载完,而不用i变量,因为每张图片加载完成时间不一样*/
            $.each(imgs, function (i, item) {
                if (typeof item != 'string') return;//图片地址不是字符串,就不处理
                var imgObj = new Image();
                $(imgObj).on("load error", function () { //图片没有正常加载页可以正确处理
                    //每加载完一张图片需要做的处理
                    count++;
                    opts.each && opts.each(count);
                    //图片全部加载完需要做的处理
                    if (count >= len) {
                        opts.all && opts.all();
                    }
                });
                $(imgObj).attr("src", item);


            })
        }
    $.extend({
        preload: function (imgs, opts) {
            new Preload(imgs, opts);
        }
    });

})(jQuery);

调用有序加载

 /*使用插件*/
    $.preload(imgs,{
        order:'ordered'
    });

 

 

本文小编starof,因知识本人在扭转,作者也在时时刻刻学习成长,小说内容也波动时更新,为防止误导读者,方便追根溯源,请各位转发申明出处:

壹、未使用预加载本领前
!DOCTYPE htmlhtml lang=”zh-CN”head meta charset=”UTF-八”
title图片预加载之冬天加载/title style .box { text…

在option中配置须求的参数

功效:传递表情对应的字符格式到后台,后台重回字符串,前端将该字符串解析展现成相应的神气展示在页面上。

var option = {
emojiArray: ['angry'], //填写表情字符串的数组,【注:源文件image下面的图标,只需要写红框内的字符串,详见下图】
textareaId: 'emoji-editor', //输入框的id
loadId: 'load', //加载表情的id
emojiContainer: 'emojiContainer',  //存储表情的容器对象
sendId: 'send',    //发送信息的按钮 id
emojiTranslateCls:'emoji-comment', //需要转换成表情(img)的容器类名,只需要添加一个类,即可自动将:kissing_heart:渲染成表情~
};
/*调用方法*/
var text = new Emoji(option);
text.init();

 

威尼斯人线上娱乐 14

 

大约效果截图:(ui方面能够依靠各自需求张开美化)

 

威尼斯人线上娱乐 15

style=”font-size: 18px; font-family: 黑体; color: #ff0000;”>运用办法:

点击发送后,发送给后台的数额是:

在option中布局要求的参数

表情插件的八个原理:

 1 var option = {
 2     emojiArray: ['angry'],     //填写表情字符串的数组,【注:源文件image下面的图标,只需要写红框内的字符串,详见下图】
 3     textareaId: 'emoji-editor',   //输入框的id
 4     loadId: 'load',                //加载表情的id
 5     emojiContainer: 'emojiContainer',     //存储表情的容器对象
 6     sendId: 'send',                      //发送信息的按钮 id
 7     emojiTranslateCls:'emoji-comment',    //需要转换成表情(img)的容器类名,只需要添加一个类,即可自动将:kissing_heart:渲染成表情~
 8 };
 9 /*调用方法*/
10 var text = new Emoji(option);
11 text.init();

•怎么样展示表情?

威尼斯人线上娱乐 16

CSS
七喜s(图片整合才能),先设定好背景Logo,然后定义每二个小Logo的position,width,height,就能够彰显想要显示的神气。
期间境遇的主题材料:怎么样决定展现表情的轻重缓急?
首先想到的是background-size这么些方式,可是要双重定义它的position,1二分开支“体力”,后来,出现转机,开采壹脾特性transform:
scale(壹.5);
调整当前因素缩放比率,哈哈,一行代码就化解啦~想要表情大,照旧小,尺寸不满意?通通1行代码解决•怎样在输入框中显示表情Logo?

大致效果截图:(ui方面可以根据各自需要进行美化)

1先河是选项 input 的textarea,可是,将表情img
“append”到那么些输入框后边,也尚无显得出那几个Logo,后来尝试了div,再“append”之后,开掘能够得逞体现表情,不过div又不可能输入文字,无果……

威尼斯人线上娱乐 17

起来主见:使用input监听,将textarea值实时加到div中,同样的,这么些也是难于不讨好~继续查究……

  点击发送后,发送给后台的数据是:

新生意识贰个比较大众的习性。contenteditable=”true”,又如沐春风的取舍了contenteditable。

    威尼斯人线上娱乐 18

一起首是用span承载表情Logo,可是用div也许span标签放置图像,则contenteditable会私下认可加到最终的div/span中……,所以会产生输入表情Logo后,再输入文字,最终的文字会在结尾多少个div/span中,导致未有显得文字。好呢……真是心累……

威尼斯人线上娱乐 19 

既然div/span 不可能,就动用img标签承载表情,那下终于能够健康输入了。

表情插件的三个原理:

【contenteditable有二个难点,它协理富文本,不安全,而且用户体验不佳。】

  • 哪些体现表情?

譬如:用户粘贴的时候,会自动带格式,例子如下:

威尼斯人线上娱乐 20

 CSS Sprites(图片整合技术),先设定好背景图标,然后定义每一个小图标的position,width,height,即可显示想要显示的表情。

 期间遇到的问题:如何控制显示表情的大小?

首先想到的是background-size这个方法,但是要重新定义它的position,非常耗费“体力”,
后来,柳暗花明,发现一个属性transform: scale(1.5); 控制当前元素缩放比率,哈哈,一行代码就搞定啦~想要表情大,还是小,尺寸不满意?通通一行代码搞定

那边是选用网络海南大学学神的一段代码,去除掉富文本成效,具体参考:某大神博文

  • 怎么在输入框中显示表情Logo?

•怎样对图纸和文字实行转移?

一齐初是挑选 input 的textarea,可是,将表情img
“append”到这几个输入框前面,也未有突显出那几个Logo,后来尝试了div,再“append”之后,开掘能够成功呈现表情,可是div又不能够输入文字,无果……

此刻就要采纳强劲的正则了,先用html()获取内容,再对剧情张开管理。
转变来文字:

起首主张:使用input监听,将textarea值实时加到div中,同样的,那几个也是积重难返不讨好~继续追究……

1 content.replace(/<img\b[^>]*/, imgObj[j])
//相称全部的<img />,替换到相应的格式

新生察觉1个极大众的习性。contenteditable=”true”,又欢悦的选项了contenteditable。

2 imgObj.push(format + img[i].getAttribute(“alt”) + format);
//那里的format笔者动用的是: 所以正是接近那样 :fearful: 的格式
转变来图片:

1开端是用span承载表情Logo,可是用div恐怕span标签放置图像,则contenteditable会暗许加到最终的div/span中……,所以会招致输入表情图标后,再输入文字,最终的文字会在最终1个div/span中,导致未有出示文字。可以吗……真是心累……

var keys = '\\+|-||||ball|a|ab|abc|abcd|accept……' //这里只列出部分
regex = new RegExp(':(' + keys + '):', 'g'), // 匹配格式形如这样子的格式 ::
$(obj[i]).html().replace(regex, emoji) //替换
function emoji() {
var key = arguments[];
return '<img src="" alt="' + key + '"class="emoji emoji_' + key + '"/>'; //返回对应的img格式
}

既然div/span
不可能,就利用img标签承载表情,那下终于能够健康输入了。

总体插件的代码格式,也是相比较宽泛的包装方式

 

//Emoji对象可变的属性
function Emoji(option) {
this.emoji = option.emojiArray,
this.textareaId = option.textareaId,
this.loadId = option.loadId,
this.sendId = option.sendId,
this.emojiContainer = option.emojiContainer,
this.emojiTranslateCls = option.emojiTranslateCls;
}

【contenteditable有3个标题,它帮忙富文本,不安全,而且用户体验糟糕。】

//每3次生成多少个实例,下面的天性都会再度生成1回,那样对于一向的方式,会多占用部分内存。那样既不环境保护,也缺乏功效。所以可以把那么些不改变的习性和艺术,直接定义在prototype对象上。那时全数固定的办法,其实都以同2个内部存款和储蓄器地址,指向prototype对象,因而就增加了运营功用。

比如:用户粘贴的时候,会自动带格式,例子如下:

Emoji.prototype = {
init: function () { //放一些初始化的方法
this.toEmoji();
this.loadEmoji();
this.bindEvent();
},
bindEvent: function () {},
toEmoji: function () {}, //服务器数据转换成表情
toText: function () {} //转换成文字
loadEmoji: function () {} //加载表情
}

威尼斯人线上娱乐 21威尼斯人线上娱乐 22

好啊,这样2个表情插件正是竣事了,系不系很简单?近来一时半刻供给注重jquery,之后借使有活力的话继续捣鼓2个基于原生js的O(∩_∩)O,具体的落成代码在github上。
最后,附上github地址:

这边是采用网上大神的一段代码,去除掉富文本功能,具体参考:某大神博文

上述所述是作者给大家介绍的JavaScript从0初始思虑表情插件,希望对大家具备扶助,如若大家有任何疑问请给作者留言,小编会及时苏醒我们的。在此也万分感激大家对台本之家网址的支撑!

 

您大概感兴趣的篇章:

  • js落成仿Discuz文本框弹出层效果
  • java(jsp)整合discuz同步登6作用详解
  • JavaScript
    浏览器验证代码(来自discuz)
  • discuz中用到的javascript函数解析
  • javascript
    Discuz代码中的msn聊天小功效
  • 九龙江写的
    Discuz论坛帖子调用js的php代码
  • Discuz!
    5.0.0论坛程序中参加1段js代码,让会员点击下载附属类小部件前自行弹出提醒窗口
  • javascript调整在光标地点插入文字适合表情的插入
  • discuz表情的JS提取方法分析
  • 怎么着对图片和文字进行退换?

这时候就要使用强大的正则了,先用html()获取内容,再对内容进行处理。

转换成文字:

1 content.replace(/<img\b[^>]*/, imgObj[j])         //匹配所有的<img />,替换成相应的格式
2 imgObj.push(format + img[i].getAttribute("alt") + format);    //这里的format我使用的是:  所以就是类似这样 :fearful:   的格式

转换成图片:

1 var keys = '\\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……'      //这里只列出部分
2 regex = new RegExp(':(' + keys + '):', 'g'),      // 匹配格式形如这样子的格式 :100:
3 $(obj[i]).html().replace(regex, emoji)   //替换
4 function emoji() {
5     var key = arguments[1];
6     return '<img src="" alt="' + key + '"class="emoji emoji_' + key + '"/>';    //返回对应的img格式
7 }

整个插件的代码格式,也是比较常见的封装方式

1 //Emoji对象可变的属性
2 function Emoji(option) {
3     this.emoji = option.emojiArray,
4     this.textareaId = option.textareaId,
5     this.loadId = option.loadId,
6     this.sendId = option.sendId,
7     this.emojiContainer = option.emojiContainer,
8     this.emojiTranslateCls = option.emojiTranslateCls;
9 }

//每一次生成一个实例,上面的属性都会重新生成一次,这样对于固定的方法,会多占用一些内存。这样既不环保,也缺乏效率。所以可以把那些不变的属性和方法,直接定义在prototype对象上。这时所有固定的方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

 1 Emoji.prototype = {
 2     init: function () {   //放一些初始化的方法
 3         this.toEmoji();
 4         this.loadEmoji();
 5         this.bindEvent();
 6     },
 7     bindEvent: function () {},
 8     toEmoji: function () {},   //服务器数据转换成表情
 9     toText: function () {}   //转换成文字
10     loadEmoji: function () {} //加载表情
11 }


好啦,这样一个表情插件就算完工了,系不系很简单?目前暂时需要依赖jquery,之后如果有精力的话继续捣鼓一个基于原生js的O(∩_∩)O,具体的实现代码在github上。

最后,附上github地址:https://github.com/beidan/emoji    欢迎star,fork~~~~~~~  

 威尼斯人线上娱乐 23威尼斯人线上娱乐 24

 

 

 


相关文章

发表评论

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

网站地图xml地图