Javascript 将spin.js微调器插入div？

刚刚找到spin.js，它似乎是一个救命稻草

问题是如何将微调器插入div

我有一个follow按钮，单击该按钮时，我会删除背景图像，当前替换为loader.gif

除了使用spin.js外，我如何做同样的事情

我找到了一个JSFIDLE的快速示例：

我想把旋转器放在红方舱里面

<div id="foo"></div>
<button id="spin"> Spin! </button>

var opts = {
  lines: 13, // The number of lines to draw
  length: 17, // The length of each line
  width: 8, // The line thickness
  radius: 21, // 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: 'spinner', // 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
};

$("#spin").click(function(){
  var target = document.getElementById('foo');
  var spinner = new Spinner(opts).spin(target);
});

#foo {
    width: 50px;
    height: 50px;
    background-color: #f00;
}

快速旋转
变量选项={
lines:13，//要绘制的行数
长度：17，//每行的长度
宽度：8，//线条粗细
半径：21，//内圈的半径
拐角：1，//拐角圆度（0..1）
旋转：58，//旋转偏移量
方向：1，//1:顺时针，-1:逆时针
颜色：“#fff”、//#rgb或#rrggbb或颜色数组
速度：0.9，每秒//圈
轨迹：100，//余辉百分比
shadow:false，//是否渲染阴影
hwaccel:false，//是否使用硬件加速
className:'微调器'，//要分配给微调器的CSS类
zIndex:2e9，//z索引（默认为2000000000）
顶部：“50%”，//相对于父级的顶部位置
左：“50%”//相对于父对象的左位置
};
$（“#旋转”）。单击（函数（）{
var target=document.getElementById（'foo'）；
var微调器=新微调器（opts）。微调（目标）；
});
#福{
宽度：50px；
高度：50px；
背景色：#f00；
}

您只需设置：

#foo {
   position: relative; //Added this
   width: 50px;
   height: 50px;
   background-color: #f00;
}

---

这实际上是一个css问题。默认情况下，.SPIN DIV被设置为<代码>位置：绝对< /代码>（并且不能用CSS来改变它，因为它是内联样式），这意味着它将位于中间，我假设是 < /Cord>标签（请在这里自由纠正我）。通过使

#foo

有一个相对位置，它成为一个定位的祖先，旋转器将坐在它里面。

我更新了你的小提琴，让它做你想做的事。我只需要调整一些配置值以获得正确的顶部和左侧位置，然后调整微调器本身的大小

---

谢谢，很好用。但我的实际网站上没有工作。我想这与其他脚本在某些方面存在冲突。在空白的测试页面中工作，但是很好。我不知道这是否是因为这个答案发布后对spin.js进行了更新，但是在JsFiddle中，微调器的大小不是由

#foo

分区决定的。它像spin.js一样集中在那里，但是它从

#foo

中溢出。不，它总是这样，我认为不可能将其安装到包含的div中。微调器叶片是根据半径选项绘制的，允许CSS影响这一点会弄乱该选项。另外，实际的微调器位于一个0px*0px的div中，因此它也不会强制#foo增加大小。

var opts = {
    lines: 10, // The number of lines to draw
    length: 7, // 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: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: '12%', // Top position relative to parent
    left: '6.5%' // Left position relative to parent
};