jQuery点赞+1放大效果
jquery实现点赞+1动态放大后消失效果,模仿163点赞或踩效果。
<!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>jQuery点击弹出+1放大效果</title> <style type="text/css"> body { margin: 0; padding: 0; font: 12px/1.5 arial; color: #3E3E3E; } p { margin-bottom: 80px; } #btn { width: 90px; height: 36px; border: none; background-color: #069; color: #fff; font-size: 14px; font-family: Microsoft YaHei; cursor: pointer; } </style> </head> <body> <p> </p> <p style="text-align:center;"><button class="btn">点击+1</button></p> <p style="text-align:center;"><button class="btn">点击+1</button></p> <p style="text-align:center;"><button class="btn">点击+1</button></p> <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> <script> ; (function ($) { $.extend({ tipsBox: function (options) { options = $.extend({ obj: null, //jq对象,要在那个html标签上显示 str: "+1", //字符串,要显示的内容;也可以传一段html,如: "<b style='font-family:Microsoft YaHei;'>+1</b>" startSize: "12px", //动画开始的文字大小 endSize: "30px", //动画结束的文字大小 interval: 600, //动画时间间隔 color: "red", //文字颜色 callback: function () { } //回调函数 }, options); $("body").append("<span class='num'>" + options.str + "</span>"); var box = $(".num"); var left = options.obj.offset().left + options.obj.width() / 2; var top = options.obj.offset().top - options.obj.height(); box.css({ "position": "absolute", "left": left + "px", "top": top + "px", "z-index": 9999, "font-size": options.startSize, "line-height": options.endSize, "color": options.color }); box.animate({ "font-size": options.endSize, "opacity": "0", "top": top - parseInt(options.endSize) + "px" }, options.interval, function () { box.remove(); options.callback(); }); } }); })(jQuery); </script> <script> $(function () { //$(".btn").one//只能点击一次用one来绑定 $(".btn").bind('click',function () { $.tipsBox({ obj: $(this), str: "+1", callback: function () { //alert(5); } }); }); }); </script> </body> </html>
来源:http://bbs.csdn.net/topics/391911535
加支付宝好友偷能量挖...