Jquery+ajax implementation of practical point-praise plug-in code _jquery

Before we summed up the jquery plug-in development of the two ways, here on the practice, do a little praise special effects plug-ins, first look at the effect bar:

Nonsense less to say, on the code:

Extended object Point-and-click Plug-ins, point-praise effects ***////***zynblog**////***2016-5-11**////*** usage: jQuery ('. praisebtn '). Praise (options); ***//; (function ($) {$.fn.praise = function (options) {var defaults = {Obj:null,//JQ object, using this Tipsbox function for which object str: "+ 1 ",//String, to display the content, or can pass a section of HTML, such as:" <b style= ' Font-family:microsoft Yahei;  > Haha </b> "startsize: 10px",/////Start Text size endsize: "30px",//animation end Text Size interval:600,//Text animation time interval color:
  "Red",//Text color callback:function () {}//callback function}; var opt = $.extend (defaults, options);
  Merge parameter $ ("Body"). Append ("<span class= ' num ' >" + opt.str + "</span>");
  var box = $ (". Num"); var left = Opt.obj.offset ()-left + opt.obj.width ()/2; span btn left distance plus half of its own width var top = Opt.obj.offset (). Top-opt.obj.height ();//top distance minus its height box.css ({"Position": "Abso Lute ", 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 () {b
   Ox.remove ();
  Opt.callback ();
 });

}) (JQuery);
 The dot-hop icon restores its original function Nicein (prop) {Prop.find ('. Praisenum '). addclass (' Nicein '). CSS ("Color", "red");
 settimeout (function () {Prop.find ('. Praisenum '). CSS ("Color", "#45BCF9"). Removeclass (' Nicein ');
}, 1000);

 };

Usage: Introduce jquery.js, and this plugin. js in a page that needs to be used to add a compliment to the plugin, and register the click event in $ (function () {}) with the [Object object].

Html:

<span class= "praisebtn" > 
  (<a href= "#" praise-flag= "0" data-id= "7" >2</a>)
  //praise-flag = "0" Record point Praise Logo (has been praised), Data-id record article ID
</span>

JQuery (this site does not force visitors to sign up after registration to point praise, so does not limit the number of visitors to the point of praise):

Point Praise Special effects +ajax Statistics dot praise number Pariseshow:function () {///Use custom Point-and-click Effect Plug-ins, before zynblog.js to introduce this plugin//jquery to the temporarily not generated tag binding event to use on (' event ', ' object ', '
   Event handle ') JQuery (document). On ("click", ". Praisebtn", function (e) {e.preventdefault (); Get the point of the article ID praise-flag:0 not saved, 1: praised the//page just generated, you can determine from the library whether the user is the point of praise, and for the Praise-flag attribute assigned initial//here is not necessary so rigorous, so the initial value is 1, (
   The most is a token in the cookie again) var Praiseflag = JQuery (this). Children (' a '). attr (' Praise-flag ');
   alert (Praiseflag);
   var Praiseartid = JQuery (this). Children (' a '). attr (' Data-id ');

   alert (Praiseartid); 1.
    If you haven't praised if (Praiseflag = 0) {var curpraise = JQuery (this). Children (' a ');
     Curpraise.attr (' Praise-flag ', "1"); Set the attribute value of the mark to 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. If already praised JQuery ("body"). Append ("<span class= ' Praisetip ' > You have praised ~</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, "fo
    Nt-size ": 12px", "Line-height": "13px", "Color": "Red"});
    Tipbox.animate ({"opacity": "0"}, 1200, function () {tipbox.remove ();
   });
 }
  });

 },

Download Address:

Jquery.praise.js