一款jQuery网页点赞加1动画效果,鼠标点击按钮的时候,会有一个+1的文字向上漂浮渐渐消失的动画效果。
代码如下:
<script type='text/javascript'> /* 点赞时+1动画 */ (function($) { $.extend({ tipsBox: function(options) { options = $.extend({ obj: null, str: "+1", 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); $(function() { $(".dingzan").click(function() { $.tipsBox({ obj: $(this), str: "+1", callback: function() {} }); }) }); </script>
本文已通过「原本」原创作品认证,转载请注明文章出处及链接。