1. [代码]jquery.facial.js

//从OSCHINA.NET 提取出来的 表情选择 插件 by zhouxiang 
//如果有不满足的地方 可以自己改改 没事随便写写的 style 和 html 都被我弄到JS里了 这样方便简洁
jQuery.fn.extend({
    facial: function (opts) {
        var _self = this, _this = $(this);
        opts = jQuery.extend({
            CallBack: function (i) { }
        }, opts || {});
        _self.Resource = {
            Style: "<style>#TweetFormPopupWraper{padding: 0;margin: 0;font-size: 9pt;font-family: 微软雅黑,Verdana,sans-serif,宋体;position: absolute;z-index: 9999;margin: 5px 0 0 0;}#TweetFormPopupWraper .clear{clear: both;font-size: 1px;line-height: 0;}#TweetFormPopupWraper ol, ul{list-style: none;padding: 0;margin: 0;}#TweetFormPopupWraper #TweetFormPopup .TweetPopupTitle{padding: 3px 5px;margin: 0 0 10px 0;font-weight: bold;line-height: 30px;border-bottom: 1px solid #EEE;font-size: 14px;}#TweetFormPopupWraper #TweetFormPopup .TweetPopupTitle a{float: right;text-decoration: none;}#TweetFormPopupWraper #TweetFormPopupWraper .l{margin: 0 0 10px 0;}#TweetFormPopupWraper #TweetFormPopupArrow{background-image: url('http://city.oschina.net/img/space/up_arrow.gif');background-repeat: no-repeat;padding-top: 5px;}#TweetFormPopupWraper .tweet_emotion{background-position: 51px 0px;}#TweetFormPopupWraper .tweet_image{background-position: 102px 0px;}#TweetFormPopupWraper .tweet_video{background-position: 152px 0px;}#TweetFormPopupWraper #TweetFormPopup{width: 392px;border: 2px solid #CCC;background: #F8F7F7;padding: 5px;}#TweetFormPopupWraper #TweetFormPopup a.emotion_img{float: left;width: 24px;height: 24px;background-image: url('http://city.oschina.net/js/ke/plugins/emoticons/qq.gif');background-repeat: no-repeat;margin: 0 2px 4px 0;border: 1px solid #F6F6F6;}#TweetFormPopupWraper #TweetFormPopup a.emotion_img:hover{border: 1px solid #5CC26F;}</style>",
            Html: "<div id=\"TweetFormPopupWraper\" style=\"display:none\"><div id=\"TweetFormPopupArrow\" class=\"tweet_emotion\"><div id=\"TweetFormPopup\"><ul id=\"TweetFormUl\"><li><div id=\"TweetEmotions\"><div class=\"TweetPopupTitle\"><a href=\"javascript:;\">关闭</a>插入表情</div></div></li></ul><div class=\"clear\"></div></div></div></div>"
        };
        _self.AddFacial = function (i) {
            $("#TweetFormPopupWraper #TweetEmotions").append("<a href=\"javascript:;\" class=\"emotion_img\" style=\"background-position: -" + i + "px 0px;\"></a>");
 
        }
        _self.WH = function (obj) {
            var top = obj.offset().top + obj.height() + 10;
            var left = obj.offset().left - 35;
            $("#TweetFormPopupWraper").css({ left: left, top: top });
        }
        _self.PageLoad = function () {
            if ($("#TweetFormPopupWraper").length == 0) {
                $(document.body).append(_self.Resource.Style);
                $(document.body).append(_self.Resource.Html);
                for (var i = 0; i < 135; i++) {
                    _self.AddFacial(i * 24);
                }
                $("#TweetFormPopupWraper .TweetPopupTitle a").click(function () {
                    $("#TweetFormPopupWraper").hide();
                });
            }
        }
        _this.click(function () {
            $("#TweetFormPopupWraper #TweetEmotions a.emotion_img").unbind("click").click(function () {
                opts.CallBack($(this).index() - 1);
            });
            _self.WH($(this));
            $("#TweetFormPopupWraper").show();
        });
        _self.PageLoad();
    }
});
2. [代码]demo.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.facial.js" type="text/javascript"></script>
</head>http://www.huiyi8.com/gaoxiaodonghua/​
<body>美女
    <div >
        <input type="button" id="btn1" class="btn" value="open" />
    </div>
    <br />
    <br />
    <br />
    <br />
    <div >
        <input type="button" id="btn2"  class="btn" value="open" />
    </div>
    <br />
    <br />
    <br />
    <br />
    <div >
        <input type="button" id="btn3"  class="btn" value="open" />
    </div>
    <script>
        $(function () {
            //可以这样  统一
//            $(".btn").facial({ CallBack: function (i) {
//                //点击返回图片索引,然后自己做处理
//                alert(i);
//            }
//            });
            //也可以这样 分开
            $("#btn1").facial({ CallBack: function (i) {
                //点击返回图片索引,然后自己做处理
                alert("第一个:"+i);
            }
            });
            $("#btn2").facial({ CallBack: function (i) {
                //点击返回图片索引,然后自己做处理
                alert("第二个:" + i);
            }
            });
            $("#btn3").facial({ CallBack: function (i) {
                //点击返回图片索引,然后自己做处理
                alert("第三个:" + i);
            }
            });
        });
    </script>
</body>
</html>

封装 oschina.net 表情选择的更多相关文章

  1. 【Qt】仿QQ表情选择控件

         表情选择控件在聊天应用中常常要用到,做起来尽管不复杂可是非常繁琐.特别是有些图标须要按顺序排列.每次重做必定是非常费时.所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWid ...

  2. 仿QQ发语音、图片选择、表情选择demo

    一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git.  喜欢的请 star  star star,共 ...

  3. Ext扩展的QQ表情选择面板

    Ext扩展的QQ表情选择面板 define(function () { EmoteChooser = function(cfg){ this.width=340; this.height=112; t ...

  4. react+ts封装AntdUI的日期选择框之月份选择器DatePicker.month

    需求:由于在项目开发中,当需要使用该组件时都需要对该组件进行大量的代码输出,为了方便代码统一管理,减少冗余代码,所以将此组件进行二次封装. 其他成员在使用中只需将自己的设置通过对应的参数传递到该组件, ...

  5. 使用 vite 构建一个表情选择插件

    初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss ...

  6. android 开发高仿QQ表情选择、输入框

    首先大家看效果: 用到的文件有(源码文件有,只包含表情.输入框等有关文件,工程项目是公司项目,恕不公开啦): res: drawable/face_del_icon.xml drawable/iv_f ...

  7. QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...

  8. [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收（转）

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是怎样在微信公众平台使用QQ表情, ...

  9. [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...

随机推荐

  1. 在Ubuntu 16.04下安装 virtualbox 5.2

        sudo sh -c 'echo "deb http://download.virtualbox.org/virtualbox/debian xenial contrib" ...

  2. 篇章二:[AngularJS] 使用AngularAMD動態載入Service

    前言 「使用AngularAMD動態載入Controller」:這篇文章裡介紹如何使用AngularAMD來動態載入Controller.本篇文章以此為基礎,介紹如何使用AngularAMD來動態載入 ...

  3. [译]NeHe教程 - 创建一个OpenGL窗体

    原文: Setting Up An OpenGL Window 欢迎阅读我的OpenGL教程.我是一个热爱OpenGL的普通码农!我第一次听到OpenGL是在3Dfx刚发布他们给Voodoo I显卡的 ...

  4. Unix编程第7章 进程环境

    准备雄心勃勃的看完APUE,但是总感觉看着看着就像进入一本字典,很多地方都是介绍函数的用法的,但是给出例子远不及函数介绍的多.而且这本书还是个大部头呢.第7章的讲的进程环境,进程是程序设计中一个比较重 ...

  5. CSDN开源夏令营 基于Compiz的switcher插件设计与实现之前期准备 git的简单使用

    因为项目的代码须要上传到git上.就须要学习一下git的使用了. 我初步接触了一下git,准备用此帖来记录git的学习,此帖会随着我对git了解的深入动态更新. 一.GIT的介绍 1.概述:git是一 ...

  6. redis php 执行命令时,单引号和双引号的区别。

    #今天遇到一个坑爹的问题,写成单引号就不行,被原样输出了. /** *判断key是否存在 */ function exists_key($key){ return $this->cmd('EXI ...

  7. js自己定义插件-选项卡

    该功能比較简单.巩固一下jquery插件写法,注意引入的jquery.js  . 自己定义插件路径代码例如以下: 页面: <!doctype html> <html> < ...

  8. 软件测试人员需要精通的开发语言（1）--- VBScript

    软件测试不局限于点点点的纯黑盒测试,提升自身的代码能力也是事关重要的.软件测试的发展,越来越多的公司对于测试人员的要求也日益提高,测试人员必备开发能力的优势也凸显出来.简单的介绍下部分开发语言的学习及 ...

  9. git生成public key

    1 配置user name和email git config --global user.name "xxx" git config --global user.email &qu ...

  10. Inside a super fast CSS engine: Quantum CSS (aka Stylo)

    https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/?utm_source=d ...