zoukankan      html  css  js  c++  java
  • 点赞+1特效

    <span id="btn"><i class="iconfont">&#xe602;</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>

    网上找的,留着备用吧。

  • 相关阅读:
    js字符串空格和换行
    python resources
    -eous
    英语资源网站
    -iatry 没病走两步
    book corpus
    epub converters
    brainstorm detain
    craftsman
    parachute
  • 原文地址:https://www.cnblogs.com/xuemingyao/p/5396582.html
Copyright © 2011-2022 走看看