jquery plugin likes "+1" effect

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.