旋转.js旋转器相对于目标 div 的位置

Question

目前jQuery spin.js的旋转器有定位选项。

我以前使用过以下配置:

        // set up spin.js vars
    var opts = {
        lines: 13, // The number of lines to draw
        length: 5, // The length of each line
        width: 2, // The line thickness
        radius:5, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 58, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#fff', // #rgb or #rrggbb or array of colors
        speed: 0.9, // Rounds per second
        trail: 100, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'mySpinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };
    // show a spinner in place of the icon
    var target = document.getElementById('testdiv');
    var spinner = new Spinner(opts).spin(target);
    $(target).data('mySpinner', spinner);

但是位置显示了它相对于父元素的位置。

现在的结构是:

<div id="container">
  <div id="testdiv">
  </div>
<div>

旋转控件将在包含的div中居中，而不是在目标div中居中。有解决这个问题的方法吗?

Answer 1

如果你还在寻找解决方案，我想你可以使用position: relative使其工作，像这样:

.mySpinner {
    position: relative !important;
}

这样，旋转器将在testdiv中居中。这是一个工作的JsFiddle