利用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-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 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点赞特效插件(二),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解ASP.NET MVC 利用Razor引擎生成静态页

    最近在研究ASP.NET MVC生成静态页,那么今天也算个学习笔记吧! 实现原理及步骤: 1.通过ViewEngines.Engines.FindView查找到对应的视图,如果是部分视图,则用:ViewEngines.Engines.FindPartialView: 2.设置上下文对象里的Model: 3.调用视图的Render()方法,将渲染结果保存到物理静态文件: using System; using System.IO; using System.Text; using System.W

  • Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://xiazai.jb51.net/201611/yuanma/ajaxfileupload(jb51.net).rar. 整个插件源码不到200行,实现非常简单,大致原理就是通过js动态创建隐

  • 使用ASP.NET MVC引擎开发插件系统

    一.前言 我心中的插件系统应该是像Nop那样(更牛逼的如Orchard,OSGI.NET),每个插件模块不只是一堆实现了某个业务接口的dll,然后采用反射或IOC技术来调用,而是一个完整的mvc小应用,我可以在后台控制插件的安装和禁用,目录结构如下: 生成后放在站点根目录下的Plugins文件夹中,每个插件有一个子文件夹 Plugins/Sms.AliYun/ Plugins/Sms.ManDao/ 我是一个有强迫症的的懒人,我不想将生成的dll文件拷贝到bin目录. 二.要解决的问题 1.as

  • asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

    本文为在mvc4中使用ajax实现无刷新分页demo,记录一下. 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据.后端控制器处理完后利用PartialView方法把数据返回到分部视图中,利用ViewBag来返回总记录数和pageSize.ajax通过回调函数把控制器返回的分部视图内容加载到主视图中显示. 说明:分页具体的分页导航和样式使用了kkp

  • asp.net实现在非MVC中使用Razor模板引擎的方法

    本文实例讲述了asp.net实现在非MVC中使用Razor模板引擎的方法.分享给大家供大家参考.具体分析如下: 模板引擎介绍 Razor.Nvelocity.Vtemplate,Razor一般在MVC项目中使用,这里介绍在非MVC项目中的用法. 如何在非MVC中使用Razor模板引擎 借助于开源的RazorEngine,我们可以在非asp.net mvc项目中使用Razor引擎,甚至在控制台.WinForm项目中都可以使用Razor(自己开发代码生成器) 如何使用Razor 环境搭建: ① 添加

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

    在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等,很酷很炫.但是并没有现成的好用的插件,于是就打算自己做一个类似的点赞插件,放上自己喜欢的点赞图标.PS:小站的图标均来自阿里妈妈旗下的那个ico

  • 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

    我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的前600个字符): 具体在www.zynblog.com 遇到的问题: 正常来讲,进入文章修改页,只需将UEditor对应的textarea的value设置为文章Content就行了: $('#editor').val('@Html.Raw(this.Model.Contents)'); 最开始我就

  • 利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper(三)

    0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 我的小站地址:我的Bootstrap小站; PS:(问博客园:为什么老是删我的置顶随便?上一篇阅读量都快500了,也分分钟给我从首页删掉...真是无语了<博客园地址:http://www.cnblogs.com/haust/p/5615946.html> ). 有点另类,分页直接是在后台拼接好html,然后发送到前台的: 1. 分页容器: <div class=&quo

  • 利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)

    1.0 为什么要做这个博客站? 在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号中,我们中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为宝库:可以借此巩固加强一下自己的"全栈&qu

  • 利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

    jQuery dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器分页.查询.格式化等功能.dataTables 官网也提供了大量的演示和详细的文档进行说明,为了方便使用,这里进行详细说明. 去官网:https://www.datatables.net/ 下载最新版本是v1.10.12. 在页面引入: <link rel="stylesheet" href="~/Content_Admin/css/boots

  • 利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能(六)

    看到新浪微博.百度百家等平台上都带有文章"打赏"功能,觉得很新鲜,于是也想在自己的博客中加入"打赏"功能. 当然,加入打赏功能并非是真的想要让别人打赏.因为只有那些真正能引起共鸣,发人深思,让人受益匪浅的文章才值得打赏,值得点赞. 而我的博客站仅仅是用作记录笔记,当做自己的知识库(如果能不经意间帮助别人那是再好不过了). 加入打赏功能纯粹是"觉得好玩",就是这么简单,Just have a fun!(博主喜欢折腾,看见一个酷炫的功能就想去实现它)

  • 在CentOS系统上从零开始搭建WordPress博客的全流程记录

    概述 最近买了台服务器,准备搭建个人博客,来持续更新自己的博客, 环境 服务器操作系统:CentOS 7.0 博客部署服务器:Apache 后台语言:PHP 数据库:MySql 前端框架:WordPress 步骤 一.安装Apache 安装 Apache 很简单,只需要在终端输入以下命令就可以了: sudo yum install httpd sudo 的意思是用 root 用户做什么操作,yum install 是在线安装:然后输入 yes 就确认下载安装了. 安装完毕之后我们需要启动服务:

  • centos 上快速搭建ghost博客方法分享

    1. 介绍 Ghost 是一套基于 Node.js 构建的开源博客平台,具有易用的书写界面和体验,博客内容默认采用 Markdown 语法书写,目标是取代臃肿的 Wordpress.本篇文章主要是介绍在如何在centos7.3上快速搭建ghost博客平台,采用yum安装mysql.nginx软件. 2. 安装 安装mysql wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm yum -y

  • 使用vuepress搭建静态博客的示例代码

    什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理. 中文官网 VuePress仓库 项目地址 VuePress 有很多优点: 界面简洁优雅(个人感觉比 HEXO 好看) 容易上手(半小时能搭好整个项目) 更好的兼容.扩展 Markdown 语法 响应式布

  • 详解用Docker快速搭建一个博客网站

    目录 一.准备工作 二.部署流程  三.访问测试 Halo 是一款现代化的个人独立博客系统,给习惯写博客的同学多一个选择. 官网地址:https://halo.run/ 一.准备工作 本章教程基于Docker搭建,所以需要你提前在服务器上安装好Docker环境. Docker安装教程:https://www.jb51.net/article/94067.htm 二.部署流程 (1)创建工作目录 mkdir ~/.halo && cd ~/.halo (2)下载配置文件到工作目录 wget

随机推荐