jQuery+ajax實(shí)現(xiàn)實(shí)用的點(diǎn)贊插件代碼
之前給大家總結(jié)了jQuery插件開(kāi)發(fā)的兩種方式,這里就實(shí)踐一下,做一款點(diǎn)贊特效插件,先看看效果吧:
廢話少說(shuō),上代碼:
//***擴(kuò)展對(duì)象點(diǎn)贊插件、點(diǎn)贊特效***// //***Zynblog**// //***2016-5-11**// //***用法:jQuery('.praisebtn').praise(options);***// ; (function ($) { $.fn.praise = function (options) { var defaults = { obj: null, //jq對(duì)象,針對(duì)哪個(gè)對(duì)象使用這個(gè)tipsBox函數(shù) str: "+1", //字符串,要顯示的內(nèi)容;也可以傳一段html,如: "<b style='font-family:Microsoft YaHei;'>哈哈</b>" startSize: "10px", //動(dòng)畫(huà)開(kāi)始的文字大小 endSize: "30px", //動(dòng)畫(huà)結(jié)束的文字大小 interval: 600, //文字動(dòng)畫(huà)時(shí)間間隔 color: "red", //文字顏色 callback: function () { } //回調(diào)函數(shù) }; var opt = $.extend(defaults, options); //合并參數(shù) $("body").append("<span class='num'>" + opt.str + "</span>"); var box = $(".num"); var left = opt.obj.offset().left + opt.obj.width()/2; //span btn左側(cè)距離加上自身寬度的一半 var top = opt.obj.offset().top - opt.obj.height();//頂部距離減去自身的高度 box.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": opt.startSize, "line-height": opt.endSize, "color": opt.color }); box.animate({ "font-size": opt.endSize, "opacity": "0", "top": top - parseInt(opt.endSize) + "px" }, opt.interval, function () { box.remove(); opt.callback(); }); } })(jQuery); //點(diǎn)贊圖標(biāo)恢復(fù)原樣 function niceIn(prop) { prop.find('.praisenum').addClass('niceIn').css("color", "red"); setTimeout(function () { prop.find('.praisenum').css("color", "#45BCF9").removeClass('niceIn'); }, 1000); };
用法:在需要用到點(diǎn)贊插件的頁(yè)面中引入jquery.js、以及這個(gè)插件.js,在$(function(){})中給"[object Object]"注冊(cè)click事件即可。
HTML:
<span class="praisebtn"> <img src="/Content/images/ico_praise.png" class="praisenum" data-bd-imgshare-binded="1"> (<a href="#" praise-flag="0" data-id="7">2</a>) //praise-flag="0" 記錄點(diǎn)贊標(biāo)識(shí)(是否已贊過(guò)),data-id記錄文章id </span>
jQuery(本站并不強(qiáng)制訪客進(jìn)行注冊(cè)登錄后才能點(diǎn)贊,因此并不限制訪客的點(diǎn)贊次數(shù)):
//點(diǎn)贊特效+Ajax統(tǒng)計(jì)點(diǎn)贊數(shù)量 pariseShow: function () { //使用自定義的點(diǎn)贊特效插件,在zynblog.js前要先引入這個(gè)插件 //jquery給暫未生成的標(biāo)簽綁定事件要用on('事件','對(duì)象','事件句柄') jQuery(document).on("click", ".praisebtn", function (e) { e.preventDefault(); //獲取被點(diǎn)贊文章的id praise-flag:0沒(méi)攢過(guò),1:贊過(guò)了 //頁(yè)面剛生成時(shí),可以從庫(kù)中確定該用戶是否點(diǎn)贊,并為praise-flag屬性賦初值 //這里沒(méi)必要那么嚴(yán)謹(jǐn),所以初值均為1,(頂多是再在cookie中給個(gè)標(biāo)記) var praiseFlag = jQuery(this).children('a').attr('praise-flag'); //alert(praiseFlag); var praiseArtId = jQuery(this).children('a').attr('data-id'); //alert(praiseArtId); //1. 如果沒(méi)贊過(guò) if (praiseFlag == 0) { var curPraise = jQuery(this).children('a'); curPraise.attr('praise-flag', "1");//先把點(diǎn)贊標(biāo)識(shí)的屬性值設(shè)為1 jQuery(this).praise({ obj: jQuery(this), str: "+1", callback: function () { jQuery.post("/Archives/PraiseStatic", { "artId": praiseArtId }, function (data) { if (data.Status == 1) { var praisecount = parseInt(curPraise.text().match(/\d+/)); curPraise.text(curPraise.text().replace(praisecount, praisecount + 1)); } else if (data.Status == 2) { alert(data.Message); } else if (data.Status == 0) { alert(data.Message); } }); } }); niceIn(jQuery(this)); } else if (praiseFlag == 1) { //2. 如果已經(jīng)已贊 jQuery("body").append("<span class='praisetip'>您已贊過(guò)~</span>"); var tipbox = jQuery(".praisetip"); var left = jQuery(this).offset().left; var top = jQuery(this).offset().top + jQuery(this).height(); tipbox.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": "12px", "line-height": "13px", "color": "red" }); tipbox.animate({ "opacity": "0" }, 1200, function () { tipbox.remove(); }); } }); },
下載地址:
- 50個(gè)比較實(shí)用jQuery代碼段
- JQuery select標(biāo)簽操作代碼段
- 分享javascript、jquery實(shí)用代碼段
- 利用Jquery實(shí)現(xiàn)幾款漂亮實(shí)用的時(shí)間軸(附示例代碼)
- 分享12個(gè)實(shí)用的jQuery代碼片段
- 基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
- 8個(gè)超實(shí)用的jQuery功能代碼分享
- 60個(gè)很實(shí)用的jQuery代碼開(kāi)發(fā)技巧收集
- 一些實(shí)用的jQuery代碼片段收集
- jquery實(shí)用代碼片段集合
- 非常實(shí)用的jQuery代碼段集錦【檢測(cè)瀏覽器、滾動(dòng)、復(fù)制、淡入淡出等】
相關(guān)文章
jQuery對(duì)val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對(duì)瀏覽器的區(qū)別,有默認(rèn)值的情況下,如果用val()賦值了,那么當(dāng)修改這個(gè)值得時(shí)候,google不能獲取最新的值,但是ie可以2014-09-09使用jQuery+HttpHandler+xml模擬一個(gè)三級(jí)聯(lián)動(dòng)的例子
昨天同學(xué)問(wèn)我有關(guān)如何快速讀取多層級(jí)xml文件的問(wèn)題,于是我就使用省、市、縣模擬了一個(gè)三級(jí)聯(lián)動(dòng)的例子,客戶端使用jQuery實(shí)現(xiàn)異步加載服務(wù)器返回的json數(shù)據(jù),服務(wù)器端則使用XPath表達(dá)式查詢數(shù)據(jù)。2011-08-08jquery點(diǎn)擊切換背景色的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery點(diǎn)擊切換背景色的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解
Validate是基于jQuery的一款輕量級(jí)驗(yàn)證插件,內(nèi)置豐富的驗(yàn)證規(guī)則,這篇文章主要介紹了jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解,需要的朋友可以參考下2018-10-10jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼,通過(guò)使用jquery動(dòng)態(tài)操作頁(yè)面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作示例
這篇文章主要介紹了jQuery+css last-child實(shí)現(xiàn)選擇最后一個(gè)子元素操作,結(jié)合實(shí)例形式分析了jQuery結(jié)合css進(jìn)行頁(yè)面元素選擇與樣式修改相關(guān)操作技巧,需要的朋友可以參考下2018-12-12