Question

使用此链接，我创建了一个带有HTML和CSS的加载栏div http://www.paulund.co.uk/css-loading-spinners

但是，现在我想用JS来创建这样的加载栏;我想使用一个函数来定义css的高度，宽度和一些其他属性，并定义了加载条使用了多少个bar div。我知道有很多库都是这样做的，但是我现在还没有使用它们，而我还在学习JS / jQuery / CSS。

需要附加到样式元素的内容是：

        .loading{
            width: 100px;
            height: 100px;
            margin: 30px auto;
            position: relative;
        }

        .loading.bar div{
            width: 10px;
            height: 30px;
            border-radius:5px;
            background: black;
            position: absolute;
            top: 35px;
            left: 45px;
            opacity: 0.05;

            -webkit-animation: fadeit 1.1s linear infinite;
            animation: fadeit 1.1s linear infinite;
        }



        .loading.bar div:nth-child(1){
            -webkit-transform: rotate(0deg) translate(0, -30px);
            transform: rotate(0deg) translate(0, -30px);

            -webkit-animation-delay:0s;
            animation-delay:0s;
        }

我需要定义宽度，高度，每个n-child ......

所以我的问题是即使在正确的方向上仍然如下？此外，尝试这样做甚至有意义吗？我的意思是，我想学习;但是，我不想学习一些看似不必要的东西。

    <script>
        function addSpinner(bar_amount, time_incr, height, width, margin){
            //
            //$('head').removeClass('load');
            $('<style>.load{width: ' + width + 'px; height: ' + height + 'px; margin: ' + margin + 'px auto; position: relative;}</style>').append('head');

            //
            $('<style>.load.brick div{width: 10px; height: 30px; border-radius:5px; background: black; position: absolute; top: 35px; left: 45px; opacity: 0.05; -webkit-animation: fadeit 1.1s linear infinite; animation: fadeit 1.1s linear infinite;}</style>').append('head');

            //
            for(var i = 0; i < bar_amount; ++i){
                var degree = i / bar_amount * 360;
                var delay = i * time_incr;

                window.alert('<style>.load.brick div:nth-child(' + (i + 1) + '){ -webkit-transform: rotate(' + degree + 'deg) translate(0, -30px); transform: rotate(' + degree + 'deg) translate(0, -30px); -webkit-animation-delay:' + delay + 's; animation-delay:' + delay + ';</style>');

                //
                $('<style>.load.brick div:nth-child(' + (i + 1) + '){-webkit-transform: rotate(' + degree + 'deg) translate(0, -30px); transform: rotate(' + degree + 'deg) translate(0, -30px); -webkit-animation-delay:' + delay + 's; animation-delay:' + delay + ';</style>').append('head');
            }


            var spinner_div = $('<div class="load brick"/>');

            for(var i = 0; i < bar_amount; ++i){
                spinner_div.append('<div/>');
            }

            return spinner_div;
        }


        $(document).ready(function(){
            var new_spinner = addSpinner(8, 0.13, 100, 100, 30);

            $('body').append(new_spinner);
        });
    </script>

Answer 1

你几乎就在那里，但你没有必要将你的css添加到文档中。您可以通过以下方式更轻松地完成此操作，但在将微调器添加到页面后必须执行此操作：

$('.load.brick').css({
    'width': width + 'px',
    'height': height + 'px',
    'margin': margin + 'px auto',
    'position': 'relative'
});

任何不会改变的内容，例如position: relative你不应该在jQuery中应用，只需将其作为规则添加到现有的css文件中。您需要在jQuery中包含的唯一内容是可变的内容。这意味着您添加的第二个样式标记应该完全在您的css文件中，因为它完全是静态的。无需通过jQuery添加它，因为它只会浪费宝贵的浏览器资源。

此外，您可以加入for循环以获得更简洁，更快速的代码：

var spinner_div = $('<div class="load brick"/>');

for(var i = 0; i < bar_amount; ++i) {
    var degree = i / bar_amount * 360,
        delay = i * time_incr,
        tile = $('<div class="tile' + i + '"></div>'

    tile.css({
        '-webkit-transform': 'rotate(' + degree + 'deg) translate(0, -30px)',
        'transform': 'rotate(' + degree + 'deg) translate(0, -30px)',
        '-webkit-animation-delay': delay + 's',
        'animation-delay': delay + 's'
    });

    spinner_div.append(tile);
}

return spinner_div;

Answer 2

我会在你的微调器类中使用标准的spinner.css，并根据需要修改spinner_div的样式。

var spinner_div = $('<div class="load brick" />');
$(spinner_div).style(...)

for(...)

return spinner_div;

Answer 3

如果你纯粹作为一种学习练习，那么继续探索，看起来你已经走上正轨。既然您只想使用JS / Jquery，那么您可以使用jquery css method，那么您可以在addSpinner函数中使事情变得更清晰：

 spinner_div.css("width", width+'px');
 spinner_div.css("height", height+'px');
 spinner_div.css("margin", margin+'px');

等

我知道你只是在玩它，但是如果你继续使用它来做一个真正的项目，那么值得注意的是，添加/操作所有这些CSS样式（特别是HTML头）就像你正在使用javascript / jquery被认为是不好的做法 - 它的性能很慢，并且使调试变得更加困难。加载div的一般解决方案是从ajax loader之类的地方下载css然后你可以使用简单的addClass和removeClass jquery打开和关闭加载的gif。

Answer 4

如你所知，我还在学习CSS / HTML5 / JS，所以我不能说这是最干净的代码，但我认为我至少发布了一个有效的例子。我知道静态部分不需要动态声明，但为了做一个例子，我离开了它。谢谢大家，是的，我知道我还有很长的路要走:)。

<head>
    <script src="jquery-2.1.1.min.js"></script>


    <style>
        @-webkit-keyframes fadeit{
            0%{opacity: 1;}
            100%{opacity: 0;}
        }

        @keyframes fadeit{
            0%{opacity: 1;}
            100%{opacity: 0;}
        }

        .load{}

        .load.brick{
            width: 10px;
            height: 30px;
            border-radius:5px;
            background: black;
            position: absolute;
            top: 35px;
            left: 45px;
            opacity: 0.05;

            -webkit-animation: fadeit 1.1s linear infinite;
            animation: fadeit 1.1s linear infinite;
        }

    </style>
</head>


<body>
    <div id="spinner" class="load">
    </div>

    <script>
        function addSpinner(bar_amount, time_incr, height, width, margin){
            var spinner_div = $('#spinner');

            //
            //$('head').removeClass('load');
            $('.load ').css({'width': width + 'px',
                            'height': height + 'px',
                            'margin': margin + 'px auto',
                            'position': 'relative'});

            //
            for(var i = 0; i < bar_amount; ++i){
                var degree = i / bar_amount * 360;
                var delay = i * time_incr;
                var tile = $('<div class="load brick"></div>');

                //
                tile.css({  '-webkit-transform': 'rotate(' + degree + 'deg) translate(0, -30px)',
                            'transform': 'rotate(' + degree + 'deg) translate(0, -30px)',
                            '-webkit-animation-delay':  delay + 's',
                            'animation-delay': delay + 's'});

                //
                spinner_div.append(tile);
            }
        }


        $(document).ready(function(){
            addSpinner(9, 0.13, 100, 100, 30);
        });
    </script>


</body>

动态制作CSS类

4 个答案: