将spin.js旋转器插入div？ [英] insert the spin.js spinner into a div?
问题描述
问题是如何将旋转器插入我的div？
我有一个跟随按钮，当点击我删除背景图像，并且目前替换为loader.gif。
我如何做同样的但用spin.js？
我敲了一个快速示例jsfiddle ：
我想要微调器在红色方块内。
< div id =foo>< / div>
< button id =spin>旋转！ < / button>
var opts = {
lines：13，//绘制的行数
length：17，//每行的长度
width：8 ，//线粗细
radius：21，//内圆半径
corner：1，//圆角度（0..1）
rotate：58，//旋转偏移
direction：1，// 1：顺时针，-1：逆时针
颜色：'#fff'，// #rgb或#rrggbb或颜色数组
速度：0.9 ，// Rounds per second
trail：100，//余辉百分比
shadow：false，//是否渲染一个阴影
hwaccel：false，//是否使用硬件加速
className：'spinner'，//分配给微调器的CSS类
zIndex：2e9，// z-index（默认为2000000000）
top：'50％'，//相对于父项的顶部位置
left：'50％'//相对于父项的左侧位置
};
$（＃spin）。click（function（）{
var target = document.getElementById（'foo'）;
var spinner = new Spinner .spin（target）;
}）;
#foo {
width：50px;
height：50px;
background-color：＃f00;
}
#foo {
position：relative; // Added this
width：50px;
height：50px;
background-color：＃f00;
}
这实际上是一个css问题。默认情况下，.spinner div设置为 position：absolute （你不能用css改变它，因为它是一个内联样式），这意味着它将被定位 最接近的已定位祖先中间，我假设是< body> 标签（随时纠正我在这里）。通过使 #foo 具有相对位置，它将变成定位的祖先，并且微调器将位于其中。
just found spin.js and it seems like a life saver.
The question is how to i insert the spinner into my div?
I have a follow button, that when clicked i remove the background image and currently replace with a loader.gif.
How can i do the same but with spin.js?
I knocked up a quick example of jsfiddle:
I would like the spinner to be inside the red square div.
<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;
}
You just need to set:
#foo {
position: relative; //Added this
width: 50px;
height: 50px;
background-color: #f00;
}
This is actually a css issue really. By default the .spinner div is set to position: absolute (and you can't change that with css because it's an inline style), which means it's going to be positioned in the middle of the nearest positioned ancestor, which I'm assuming was the <body> tag (feel free to correct me here). By making #foo have a relative position, it becomes a positioned ancestor, and the spinner will sit inside it.
这篇关于将spin.js旋转器插入div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
