将spin.js微调器插入div？

刚刚找到spin.js，它似乎是一个救生员。

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

我有一个跟随按钮，单击时我删除背景图像，目前替换为loader.gif。

我怎么能用spin.js做同样的事情？

我敲了一个jsfiddle的简单例子：

http://jsfiddle.net/4XpHp/

我想旋转器在红色方格div内。

  Spin!  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; } 

Answer 1

你只需要设置：

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

的jsfiddle

这实际上是一个css问题。 默认情况下，.spinner div设置为position: absolute （你不能用css改变它，因为它是一个内联样式），这意味着它将被定位在最近的定位祖先的中间，我假设是标签（请随时在此纠正我）。 通过使#foo具有相对位置，它成为一个定位的祖先 ，并且旋转器将位于其内部。

Answer 2

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

http://jsfiddle.net/4XpHp/2/

 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 };