我正在构建一个使用Jquery路径动画的页面。动画化的DIV在页面加载时通过查询进行定位,然后进行动画化。动画完成后,我希望使用百分比边距通过css定位DIV,这样当调整屏幕大小时,它们将保持相对的结束位置。我的问题似乎是,我无法使用.css()分配百分比边距,即使我目前将其作为字符串传递x%!我是编程新手,所以我可以利用我能得到的所有帮助(和经验丰富的眼睛)。这也是我的第一个问题,所以如果我发错了,请耐心等待。我使用的脚本和css文件很大(更不用说JQuery2.x),所以我粘贴了以下代码片段:
HTML:
<div>
<div class = "frame">
<div class = "photo">
</div>
<div class = "orbit one"></div>
<div class = "orbit two"></div>
<div class = "orbit three"></div>
<div class = "orbit four"></div>
<!--<div class = "orbit five"></div>
<div class = "orbit six"></div>-->
</div>
CSS:
.photo {
z-index: 1;
border-radius: 100%;
background: #aef;
position: relative;
height: 35%; /*380px*/
width: 35%; /*380px*/
margin: 8.33% 0% 0% 33.5%; /*50px 0px 0px 268px*/
}
.orbit {
z-index: 0;
border-radius: 100%;
background: Red;
height: 10%;/*15%*/
width: 10%; /*15%*/
position: relative;
}
JS:
fix: function fix(button, position) {
var left = position.left.toString();
var top = position.top.toString();
console.log(top);
console.log('left: ' + left.concat('%'));
button.css({'margin-left': left + '%'});
button.css({'margin-top': top + '%'});
console.log(top);
console.log('fix received: ' + button);
console.log('and set top margin to: ' + button.css('margin-top'));
console.log('and left margin to: ' + button.css('margin-left'));
}
将边距应用为百分比时,浏览器会计算它相对于父元素width的值。这意味着父div需要有一个显式的宽度,以便边距具有任何效果。查看这篇文章了解更多深入信息。