点赞+1特效

<span id="btn"><i class="iconfont"></i> 点击</span>
<script src="js/jquery.min.js" type="text/javascript"></script>
<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>

网上找的,留着备用吧。

时间: 2024-11-08 12:12:31

点赞+1特效的相关文章

jquery 插件之 点赞“+1” 特效

一般用户点个赞后,都会有个 +1 的特效飘过,用户已经点过赞了,会有“已点过赞”的特效提示 在这里,我们写了一个点赞的插件 //扩展对象点赞插件.点赞特效 //用法:jQuery('.praisebtn').praise(options);//为多元素注册事件时要使用class类名,不能用id ; (function ($) { $.fn.praise = function (options) { var defaults = { obj: null, //jq对象,针对哪个对象使用这个tips

ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件

1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等,很酷很炫.但是并没有现成的好用的插件,于是就打算自己做一个类似的点赞插件,放上自己喜欢的点赞图标. 先来看一下效果图吧:也可以去我的博客站 www.zynblog.com亲身体验一下. 注:(博客地址:www.zynblog.com,采用ASP.NET MVC + Bootstrap搭建) 2. 插

SpriteBuilder&amp;amp;Cocos2D使用CCEffect特效实现天黑天亮过度效果

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在动作或RPG类游戏中我们有时须要天黑和天亮过度的效果来完毕场景的过度,有非常多种方法比方用场景切换的过渡类来实现.可是在这里我们使用另外的方法:CCEffect特效节点来实现. 打开SpriteBuilder,在CCB场景中加入一个CCEffectNode节点,按例如以下设置: 注意上图有2个Brightness效果,实际仅仅用一个,还有一个是做其它測试用的

Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命

Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/liuguilin.html 日后我所写的特效专辑也会以一添加在这个专栏上,今天写的这个特效,是关于聊天的,你肯定遇到过,就是你跟人家聊天的时候,比如发送应(么么哒),然后屏幕上全部就是表情了,今天我们就是做这个,撒花的特效,国际惯例,上图 截图 实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?其实

Qt制作Aero特效窗口

转载请注明链接与作者huihui1988 初学QT,边看书边自己做点小东西.最近突然心血来潮,想自己做个小巧点的,界面美观一点的备忘当桌面上.想了半天,发现VISTA/WIN7的Aero效果就不错,况且自己现在就在用WIN7.于是上网找了下QT制作Aero效果的方法.Google之后终于找到了函数和用法.于是做了一个简单的Aero特效窗口 以下是头文件和实现文件: [cpp] view plaincopy //qtwin.h #ifndef QTWIN_H #define QTWIN_H #in

WordPress英文主题不显示中文的原因:Cufon字体特效

经常会有WordPress英文主题不显示文章标题,其原因是英文主题设计者喜欢用Cufon字体特效,从而导致中文无法显示,Cufon字体特效js代码主要是将文字以图片的方式显示出来,但是其缺点是:只支持英文字符和数字,其他文字只能和他说拜拜了,中文也不例外,下面我们看看Cufon字体特效究竟是何方神圣. 什么是Cufon? Cufon 是一个用来替代 sIFR 框架,实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库(cufon-yui.js). 为什么要用Cufon 在web

牙痛的特效治疗法

牙疼,英文为:toothache,不是病,但痛起来要命. 我们都有过牙痛的经历吧,现在终于搞清楚了,牙痛的根源是十二经络邪火上腾作乱.   按阴阳分,上牙属阳,下牙属阴.       再细分,中门上牙痛是有心火,下牙痛有肾火.       两边上牙痛有胃火,下牙痛有脾火.       左边上牙痛有胆火,下牙痛有肝火. 特效治疗法: 一,通过揉搓合谷穴来治疗. 合谷穴治牙痛是最管用的,而且是交叉治.如果您右侧牙痛,就揉左边的合谷穴:左侧牙疼,就揉右边的合谷穴.揉的时候,最好再加一个压痛点,那效果就

android tv焦点特效实现浅析

Android TV上的焦点凸显特效相信大家都看到过,那么我们就来实现它吧,首先上张效果图. 先说一下实现原理,主要通过重写RelativeLayout实现item,之后在其中加入scalanimation动画效果.刚开始处理时,还是发现了一些问题,比如item放大后会被其他item遮挡,如何添加选中边框等等,以及动画的实现等等.下面放上实现细节. 首先是item的代码: <view xmlns:android="http://schemas.android.com/apk/res/and

【Unity Shaders】使用Unity Render Textures实现画面特效——画面特效中的叠加(Overlay)混合模式

本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源(当然你也可以从官网下载). ========================================== 分割线 ========================================== 写在前面 在这篇里,我们将会学习另一种混合模式,叠加(Overlay)混合模式.这种混合模式使用了条