javascript - 在(目标)div 内居中 spin.js 微调器

Question

我有以下简单的标记和样式(参见 JSFiddle ):

HTML:

<div id="wrapper"><div id="content"></div></div>    

CSS:

#content {
    background-color:lightyellow;
    height:200px;
    color:green;
}
#wrapper{
    border:1px solid black;
    color:red;
}

我使用 Vanilla JS 和 jQuery 选项将微调器目标设置为 #content div，我遇到了几个问题。首先，在这两种情况下，微调器似乎都不是在目标元素的父元素的中间构造的，这与文档所说的相反:

Positioning
Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually.

其次，当使用 Vanilla JS 时，微调器不使用目标上设置的颜色。当使用 jQuery 启动它时，它确实如此(即对于 #content 它使用绿色)。

我对文档的理解有误吗？如果是这样，我怎样才能将微调器置于特定元素内？如果不是，为什么上面的代码片段没有将微调器置于目标内的中心？

Answer 1

简单添加

position: relative;

#content CSS 规则。

CSS:

#content {
    background-color: lightyellow;
    text-align: middle;
    height: 200px;
    color: green;
    position: relative;
}

#wrapper {
    border: 1px solid black;
}

查看更新的 JSFiddle here .

编辑:

如果您尚未在初始化时自己设置颜色，则 spin.js 的 jQuery 插件将采用父级的颜色。这是因为它内置了这个附加功能。在 jQuery.spin.js(第 65 行)中:

opts = $.extend(
  { color: color || $this.css('color') },
  $.fn.spin.presets[opts] || opts
)

这将选择父容器的颜色并替换 opts 对象中的颜色，以便微调器具有正确的颜色。

如果您想在标准 JavaScript 中复制此功能，您可以这样做:

$(document).ready(function () {
    var opts = {
        lines: 17, // The number of lines to draw
        length: 26, // The length of each line
        width: 12, // The line thickness
        radius: 3, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1.1, // Rounds per second
        trail: 74, // Afterglow percentage
        shadow: true, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent in px
        left: '50%' // Left position relative to parent in px
    };

    //$('#content').spin(opts);

    var target = document.getElementById('content');
    opts.color = getComputedStyle(target).getPropertyValue('color');
    var spinner = new Spinner(opts).spin(target);
});

查看此 updated JSFiddle .