您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“如何利用praise.js實(shí)現(xiàn)點(diǎn)贊特效”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何利用praise.js實(shí)現(xiàn)點(diǎn)贊特效”吧!
1. 為啥要做這個(gè)點(diǎn)贊插件?
praise.js是一款小巧的jQuery點(diǎn)贊插件,使用簡(jiǎn)便,效果美觀。
在做個(gè)人博客時(shí)遇到了文章點(diǎn)贊問(wèn)題。聯(lián)想到各大社交網(wǎng)絡(luò)中的點(diǎn)贊特效:手勢(shì)放大、紅心放大等等,很酷很炫。但是并沒(méi)有現(xiàn)成的好用的插件,于是就打算自己做一個(gè)類似的點(diǎn)贊插件,放上自己喜歡的點(diǎn)贊圖標(biāo)。
2. 插件源碼
praise.js:
//***擴(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 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); $("body").append("<span class='num'>" + opt.str + "</span>"); var box = $(".num"); var left = opt.obj.offset().left + opt.obj.width()/2; 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); };
3. 使用方法:
在需要用到點(diǎn)贊插件的頁(yè)面中引入jquery.js、prase.js,然后在$(function(){})中給"praisebtn"注冊(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>) </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(); }); } }); },
到此,相信大家對(duì)“如何利用praise.js實(shí)現(xiàn)點(diǎn)贊特效”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。