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>
轉載于:https://www.cnblogs.com/xkzy/p/3966665.html
){kind=icon}
)
