js点赞浮动特效
2017-05-10 14:49
127 查看
js自己封装的库;
使用方法:
(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);
使用方法:
$.tipsBox({ obj: $("#zans"), str: "+1", callback: function() {} });
相关文章推荐
- 【js特效】网页超过一屏时自动浮动在网页最上方的adsorption效果
- 利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
- 爆炸式的JS圆形浮动菜单特效代码
- 利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件
- 爆炸式的JS圆形浮动菜单特效代码
- ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件(二)
- js浮动广告
- 小小浮动广告js
- 收集的一个表格特效的JS代码
- 一段JS时间特效
- JS浮动层[公司JS开发人员做的DEMO]与大家分享
- 新闻切换JS特效
- JS浮动提示
- js浮动窗口代码
- [转贴]CSS+JS实现网页(图片)特效
- 用roll.js实现的图片自动滚动+鼠标触动的特效
- Flash和JS实现的图片幻灯片切换特效
- 全国省市县无刷新多级关联菜单[网页特效JS代码]
- 几则常用的JS特效