利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞
网络编程 2021-07-04 22:41www.168986.cn编程入门
这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)的相关资料,需要的朋友可以参考下
在上篇文章给大家介绍了。接下来给大家介绍如果做个点赞插件,一起通过本文学习吧!
1. 为啥要做这个点赞插件?
praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观。
在做个人博客时遇到了文章点赞问题。联想到各大社交网络中的点赞特效手势放大、红心放大等等,很酷很炫。并没有现成的好用的插件,于是就打算自己做一个类似的点赞插件,放上自己喜欢的点赞图标。PS:小站的图标均来自阿里妈妈旗下的那个iconfont,大家可以去那儿找自己喜欢的图标。 上篇博文介绍了本站的简要情况去看看?
先来看一下效果图吧也可直接去博客站 体验一把
注(博客地址 ,采用ASP.NET MVC + Bootstrap搭建)
2. 插件源码
praise.js
//扩展对象点赞插件、点赞特效// //Zynblog// //2016-5-11// //用法jQuery('.praisebtn').praise(options);// ; (function ($) { $.fn.praise = function (options) { var defaults = { obj: null, //jq对象,针对哪个对象使用这个tipsBox函数 str: "+1", //字符串,要显示的内容;也可以传一段html startSize: "10px", //动画开始的文字大小 endSize: "30px", //动画结束的文字大小 interval: 600, //文字动画时间间隔 color: "red", //文字颜色 callback: function () { } //回调函数 }; 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 = opt.obj.offset(). - opt.obj.height(); box.css({ "position": "absolute", "left": left + "px", "": + "px", "z-index": 9999, "font-size": opt.startSize, "line-height": opt.endSize, "color": opt.color }); box.animate({ "font-size": opt.endSize, "opacity": "0", "": - parseInt(opt.endSize) + "px" }, opt.interval, function () { box.remove(); opt.callback(); }); } })(jQuery); //点赞图标恢复原样 function niceIn(prop) { prop.find('.praisenum').addClass('niceIn').css("color", "red"); setTimeout(function () { prop.find('.praisenum').css("color", "#45BCF9").removeClass('niceIn'); }, 1000); };
3. 使用方法
在需要用到点赞插件的页面中引入jquery.js、prase.js,然后在$(function(){})中给"praisebtn"注册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: (本站并不强制访客进行注册登录后才能点赞,并不限制访客的点赞次数)
//点赞特效+Ajax统计点赞数量 pariseShow: function () { //使用自定义的点赞特效插件,在zynblog.js前要先引入这个插件 //jquery给暂未生成的标签绑定事件要用on('事件','对象','事件句柄') jQuery(document).on("click", ".praisebtn", function (e) { e.preventDefault(); //获取被点赞文章的id praise-flag:0没攒过,1赞过了 //页面刚生成时,可以从库中确定该用户是否点赞,并为praise-flag属性赋初值 //这里没必要那么严谨,所以初值均为1,(顶多是再在cookie中给个标记) var praiseFlag = jQuery(this).children('a').attr('praise-flag'); //alert(praiseFlag); var praiseArtId = jQuery(this).children('a').attr('data-id'); //alert(praiseArtId); //1. 如果没赞过 if (praiseFlag == 0) { var curPraise = jQuery(this).children('a'); curPraise.attr('praise-flag', "1");//先把点赞标识的属性值设为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. 如果已经已赞 jQuery("body").append("<span class='praisetip'>您已赞过~</span>"); var tipbox = jQuery(".praisetip"); var left = jQuery(this).offset().left; var = jQuery(this).offset(). + jQuery(this).height(); tipbox.css({ "position": "absolute", "left": left + "px", "": + "px", "z-index": 9999, "font-size": "12px", "line-height": "13px", "color": "red" }); tipbox.animate({ "opacity": "0" }, 1200, function () { tipbox.remove(); }); } }); },
praise.js源码下载
以上所述是长沙网络推广给大家介绍的利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程