利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)

网络编程 ASP.NET 实用技巧 分类:[default] 更新日期: 2016-01-25
这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下

在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)。接下来给大家介绍如果做个点赞插件,一起通过本文学习吧!

1. 为啥要做这个点赞插件?

   praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观。

在做个人博客时遇到了文章点赞问题。联想到各大社交网络中的点赞特效:手势放大、红心放大等等,很酷很炫。但是并没有现成的好用的插件,于是就打算自己做一个类似的点赞插件,放上自己喜欢的点赞图标。PS:小站的图标均来自阿里妈妈旗下的那个iconfont,大家可以去那儿找自己喜欢的图标。 上篇博文介绍了本站的简要情况:去看看?

     先来看一下效果图吧:也可直接去博客站 www.zynblog.com 体验一把

注:(博客地址:www.zynblog.com ,采用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 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);
//点赞图标恢复原样
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->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 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();
    });
   }
  });
 }, 

praise.js源码下载:jquery.praise.js

以上所述是小编给大家介绍的利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
    利用ASP.NETMVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)
    这篇文章主要介绍了利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug四的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTM ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    利用ASP.NETMVC+Bootstrap搭建个人博客之打造清新分页Helper三
    这篇文章主要介绍了利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper三的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 我的小站地址:我的Bootstrap小站; PS:(问博客园:为什么老是删我 ...
  • 利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站(一)
    这篇文章主要介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站一的相关资料,需要的朋友可以参考下1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效. ...
  • asp.netcore实现文件上传功能
    asp.netcore实现文件上传功能
    这篇文章主要为大家详细介绍了asp.net core实现文件上传功能,怎么做单文件和多文件上传,感兴趣的小伙伴们可以参考一下本文实例为大家分享了单文件上传.多文件上传的功能,供大家参考,具体内容如下 单文件上传 上传文件在Web应用程序中是一个常见的功能.在asp.net core中上传文件并保存在服务器上,是很容易的.下面就来演示一下怎么样在 ASP.NE ...
  • CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    CSS3实现动态翻牌效果仿百度贴吧3D翻牌一次动画特效
    本文主要分享一个利用CSS3新特性transform,实现3D翻牌的特效,有需要的小伙伴可以参考下.今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望可以跳转),a中包含两个div ...
猜你喜欢