jQuery点赞动画效果+1的代码实现
2017-11-26 09:09
537 查看
{#点赞效果#} <script type="text/javascript"> (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); function niceIn(prop) { prop.find('i').addClass('niceIn'); setTimeout(function () { prop.find('i').removeClass('niceIn'); }, 1000); } $(function () { $("#btn").click(function () { $.tipsBox({ obj: $(this), str: "+1", callback: function () { } }); niceIn($(this)); }); }); </script> {#点赞效果end#}
<div class="pull-right" style="color: red;margin-right: 15px" id="thumbs_up"> <h3> <span id="btn"> <i class="fa fa-hand-o-up" aria-hidden="true"></i> </span>{{ article.go_up_count }} </h3> </div>
相关文章推荐
- jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
- jQuery实现带有动画效果的回到顶部和底部代码
- jQuery实现动画效果的实例代码
- jQuery实现有动画淡出效果的二级折叠菜单代码
- 通过jquery实现页面的动画效果(实例代码)
- jquery实现初次打开有动画效果的网页TAB切换代码
- jquery二级菜单动画效果的实现代码
- jQuery实现带动画效果的多级下拉菜单代码
- 不用jQuery实现的动画效果代码
- jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
- Jquery实现简单的动画效果代码
- jQuery实现带动画效果的多级下拉菜单代码
- jQuery基于ajax实现带动画效果无刷新柱状图投票代码
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- php点赞效果的制作代码+解析(jQuery+Ajax+PHP实现“赞”)
- jquery实现初次打开有动画效果的网页TAB切换代码
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jQuery模拟实现天猫购物车动画效果实例代码
- jQuery基于ajax实现带动画效果无刷新柱状图投票代码