General users point to praise, there will be a +1 effect floating over, the user has already ordered the praise, there will be "like" the effect of the tip
Here, we wrote a little like the plugin
Extension objects like plug-ins, likes effects//usage: jQuery ('. praisebtn '). Praise (options);//For multi-element register event to use class name, cannot use ID; (function ($) {$.fn.praise = function (options) {var defaults = {Obj:null,//JQ object, which object to use for this TIPSB Ox function str: "+1",//String, the content to be displayed, or a section of HTML, such as: "<b style= ' font-family:microsoft yahei; ' > Haha </b> "startsize: 10px",//Animation start text size endsize: "30px",//animation end of the text size interval: 600,//Text animation time interval color: "Red",//Text color callback:function () {}//callback function}; var opt = $.extend (defaults, options); Merge parameters $ ("Body"). Append ("<span class= ' num ' >" + opt.str + "</span>"); var box = $ (". Num"); var = opt.obj.offset (). Left + opt.obj.width ()/2;//span btn The distance from the leftmost side plus its own width of half var top = Opt.obj.offset (). Top-op T.obj.height ();//top distance minus its 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 (); }); } $.fn.praised = function (options) {var defaults = {Obj:null,//JQ object, which object to use for this tipsbox function STR: "You have liked ~",//String, to display the content; Startsize: "10px",//Animation start text size endsize: "30px",//animation end of text size interval:600,//Text animation time interval Co Lor: "Red",//Text color callback:function () {}//callback function}; var opt = $.extend (defaults, options); Merge parameters $ ("Body"). Append ("<span class= ' Praisetip ' >" + opt.str + "</span>"); var tipbox = JQuery (". Praisetip"); var = opt.obj.offset (). Left + opt.obj.width ();//span btn the distance to the far side plus the half var top of its own width = Opt.obj.offset (). Top + opt.obj.height ();//top distance minus its own height tipbox.css ({"position": "Absolute", "Left": Left + "px", "top": Top + "px", "z-index": 9999, "font-size": "12px", "Line-height": "20px", "Color": "Red"}); Tipbox.animate ({"opacity": "0"}, +, function () {tipbox.remove (); }); }}) (JQuery);
On the HTML
<span class= "praisebtn327111" ><a href= "javascript:void (0)" onclick= "Praise (' 327111 ', ' 57071 ', ' 0 ')" > Likes (<span id= "praiseCount327111" >1</span>) </a></span>
On the reference point like the function, that is, if the result of Ajax return is success, it means that the point like success, floating over the hint +1, the other hand, then said to have liked
function Praise (msgid,name,count) {var datas={"MsgId": MsgId, "name": Name, "Count": Count}$.ajax ({type: "post", url: "/ Addmsgpraise ", Data:datas,datatype:" Text ", success:function (data) {var praisebtn = JQuery (". praisebtn "+msgid); if ( data== "Success") {Praisebtn.praise ({obj:praisebtn,str: "+1"}), Count ++;$ ("#praiseCount" +msgid). HTML (count);} Else{praisebtn.praised ({obj:praisebtn});}});}
?
jquery plugin likes "+1" effect