点击弹出 +1放大效果 -- jQuery插件

时间：2023-01-16 12:52:42

20140110更新：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>提示插件</title>

    <style>

        body {margin:;padding:;font:12px/18px arial;color:#;}

    </style>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <script>

        /**

         * Created by 磊 on 14-1-9.

         */

        ;(function($){

            $.fn.extend({

                tipsbox: function(options) {

                    options = $.extend({

                        str: "+1",

                        startSize: "14px",

                        endSize: "40px",

                        interval: ,

                        color: "red",

                        style: "",

                        callback: function() {}

                    }, options);

                    $("body").append("<span class='tips_box' style='"+ options.style +"'>"+ options.str +"</span>");

                    var box = $(".tips_box");

                    var self = $(this);

                    var top = self.offset().top;

                    var left = self.offset().left + self.width() /  - box.width() / ;

                    //alert(layer.width());

                    box.css({

                        "position": "absolute",

                        "top": top,

                        "left": left,

                        "font-size": options.startSize,

                        //"font-weight": "bold",

                        "color": options.color

                    });

                    box.animate({

                        "top": top - self.height() / ,

                        "opacity": ,

                        "font-size": options.endSize

                    }, options.interval, function() {

                        box.remove();

                        options.callback();

                    });

                }

            });

        })(jQuery);

    </script>

</head>

<body>

<p style="padding:100px;"><input id="btn" type="button" value="点击" style="width:100px;height:34px;font-size:16px;border:none;background-color:#f6f6f6;border:1px solid #ddd;border-radius:3px;color:#666;font-family:Microsoft YaHei;cursor:pointer;outline:none;"/></p>

<script>

    $(function() {

        $('#btn').click(function() {

            $('#btn').tipsbox({

                style: 'font-weight:bold;',

                callback: function() {

                    //alert("fuck");

                }

            });

        });

    });

</script>

</body>

</html>

20140107更新：

最近工作的项目中，需要这样的功能，最初写了函数，满足不了需求，so。。。封装成了插件，考虑到几种情况，传递给一个元素，弹窗会出现在这个元素的位置。可以设置字体大小、颜色什么的。。最初文字大小、结束文字大小，动画完成时间等等。。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>点击弹出 +1放大效果 -- jQuery插件</title>

    <style type="text/css">

        body {margin:; padding:;font:12px/1.5 arial; color:#3E3E3E;}

        p {margin-bottom:80px;}

        #btn {width:90px;height:36px;border:none;background-color:#;color:#fff;font-size:14px;font-family:Microsoft YaHei;cursor:pointer;}

    </style>

</head>

<body>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:center;"><button id="btn">点击我</button></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<script>

    ;(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: ,  //动画时间间隔

                    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() / ;

                var top = options.obj.offset().top - options.obj.height();

                box.css({

                    "position": "absolute",

                    "left": left + "px",

                    "top": top + "px",

                    "z-index": ,

                    "font-size": options.startSize,

                    "line-height": options.endSize,

                    "color": options.color

                });

                box.animate({

                    "font-size": options.endSize,

                    "opacity": "",

                    "top": top - parseInt(options.endSize) + "px"

                }, options.interval , function() {

                    box.remove();

                    options.callback();

                });

            }

        });

    })(jQuery);

</script>

<script>

    $(function() {

        $("#btn").click(function() {

            $.tipsBox({

                obj: $(this),

                str: "+998",

                callback: function() {

                    //alert(5);

                }

            });

        });

    });

</script>

</body>

</html>

其实很简单，就文字不断的增大的同时，透明度慢慢减小。。。。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>+</title>

</head>

<body>

<input type="button" value="狠狠的点我" id="btn" style="width:100px;margin:100px;" onclick="numPop(event, '+10');">

<input type="button" value="点我" id="btn" style="width:100px;margin:100px;" onclick="numPop(event, '+100分');">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

function numPop(event, str){

    var html = '<div id="pop_num">'+ str +'</div>';

    $('body').append(html);

    $('#pop_num').css({

        'position': 'absolute',

        'top': event.pageY + 'px',

        'left': event.pageX + 'px',

        'font-size': '20px',

        'color': '#f30'

    });

    $('#pop_num').animate({

        'font-size': '150px',

        'opacity': ''

    },'slow', function(){

        $(this).remove();

    });

}

</script>

</body>

</html>

在写这个效果的时候，遇到一个问题，我最初是这样写的:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>+</title>

</head>

<body>

<input type="button" value="狠狠的点我" id="btn" style="width:100px;margin:100px;">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function(){

    $('#btn').click(function(e){

        var html = '<div id="pop_num">+1</div>';

        $('body').append(html);

        $('#pop_num').css({

            'position': 'absolute',

            'top': e.pageY + 'px',

            'left': e.pageX + 'px',

            'font-size': '20px',

            'color': '#f30'

        });

        $('#pop_num').animate({

            'font-size': '150px',

            'opacity': ''

        },'slow', function(){

            $(this).remove();

        });

    });

});

</script>

</body>

</html>

这样很容易就实现我需要的效果，但是考虑的程序中，可能不是每次都是 +1， 也可能是+10，所以要封装成函数，把想要的弹出的字符串当成参数传递给函数，于是我又这样写：

<input type="button" value="狠狠的点我" id="btn" style="width:100px;margin:100px;" onclick="numPop('+10');">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">

function numPop(str, e){

    var html = '<div id="pop_num">'+ str +'</div>';

    $('body').append(html);

    $('#pop_num').css({

        'position': 'absolute',

        'top': e.pageY + 'px',

        'left': e.pageX + 'px',

        'font-size': '20px',

        'color': '#f30'

    });

    $('#pop_num').animate({

        'font-size': '150px',

        'opacity': ''

    },'slow', function(){

        $(this).remove();

    });

}

</script>

但是，却出错了，没能实现效果，问了一下QQ群里的同行，发现我两个地方写错了。。

首先，function numPop(str, e) 这个地方应该修改成 function numPop(event, str), event必须作为第一个参数，只能写成event，不能写成e、ev或者其他的；

其次，调用的时候，应该这么调用 onclick="numPop('event, +10');" 那个event也要写上。。

苍天啊，大地啊，这么简单的问题，我居然。。。

相关文章