博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js点赞浮动特效
阅读量:7052 次
发布时间:2019-06-28

本文共 1575 字,大约阅读时间需要 5 分钟。

js自己封装的库;

(function($) {        $.extend({            tipsBox: function(options) {                options = $.extend({                    obj: null, //jq对象,要在那个html标签上显示                    str: "+1", //字符串,要显示的内容;也可以传一段html,如: "+1"                    startSize: "12px", //动画开始的文字大小                    endSize: "30px", //动画结束的文字大小                    interval: 600, //动画时间间隔                    color: "red", //文字颜色                    callback: function() {} //回调函数                }, options);                $("body").append("" + options.str + "");                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() {}});

 

转载于:https://www.cnblogs.com/zsl123/p/6835942.html

你可能感兴趣的文章
【NLP】文本相似度
查看>>
python模拟Get请求保存网易歌曲的url
查看>>
Gson 解析教程
查看>>
曼-惠特尼U检验Mann–Whitney U Test
查看>>
Android 常用动画之RotateAnimation
查看>>
使用 video.js 开发 HTML5 视频页面
查看>>
Go --- 设计模式(模板模式)
查看>>
Java中的日期和时间
查看>>
git命令-切换分支
查看>>
小米手机会不会更好
查看>>
linux免密码登录
查看>>
JS比较两个数组是否相等 是否拥有相同元素
查看>>
RPM安装软件
查看>>
SSH 基于ajax实现修改密码功能步骤梳理
查看>>
atitit.Sealink2000国际海运信息管理系统
查看>>
android面试总结01 activity生命周期
查看>>
Java 实现策略(Strategy)模式
查看>>
Python文本爬虫实战
查看>>
leetcode:Gray Code
查看>>
IDEA+PHP+XDebug调试配置
查看>>