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


    20140110更新:

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>提示插件</title>
        <style>
            body {margin:0;padding:0;font:12px/18px arial;color:#666;}
        </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: 500,
                            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() / 2 - box.width() / 2;
                        //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() / 2,
                            "opacity": 0,
                            "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="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:0; padding:0;font:12px/1.5 arial; color:#3E3E3E;}
            p {margin-bottom:80px;}
            #btn {90px;height:36px;border:none;background-color:#069;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: 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);
    </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>+1</title>
    </head>
    
    <body>
    
    
    <input type="button" value="狠狠的点我" id="btn" style="100px;margin:100px;" onclick="numPop(event, '+10');">
    <input type="button" value="点我" id="btn" style="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': '0'
        },'slow', function(){
            $(this).remove();
        });
    }
    </script>
    
    </body>
    </html>

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

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>+1</title>
    </head>
    
    <body>
    
    
    <input type="button" value="狠狠的点我" id="btn" style="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': '0'
            },'slow', function(){
                $(this).remove();
            });
        });
    });
    </script>
    
    </body>
    </html>

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

    <input type="button" value="狠狠的点我" id="btn" style="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': '0'
        },'slow', function(){
            $(this).remove();
        });
    }
    </script>

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

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

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

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

  • 相关阅读:
    [BZOJ2296] [POJ Challenge] 随机种子
    [BZOJ1026] [SCOI2009] windy数 (数位dp)
    [BZOJ1306] [CQOI2009] match循环赛 (搜索)
    [BZOJ2654] tree (kruskal & 二分答案)
    [BZOJ3506] [Cqoi2014] 排序机械臂 (splay)
    [BZOJ1552] [Cerc2007] robotic sort (splay)
    [BZOJ3110] [Zjoi2013] K大数查询 (树套树)
    BZOJ3611: [Heoi2014]大工程
    BZOJ2286: [Sdoi2011]消耗战
    BZOJ3876: [Ahoi2014]支线剧情
  • 原文地址:https://www.cnblogs.com/huanlei/p/3412174.html
Copyright © 2020-2023  润新知