Question

我有一个由4个圆圈组成的徽标。我的HTML将这些作为单独的圈子，我正在尝试做的就是这个......

当页面加载所有圆圈时，开始居中并重叠。动画立即向左和向右展开圆圈，使它们只略微重叠。问题是，向右移动的元素将页面边缘推向右侧，因此用户可以向右滚动，只看到空格。

我正在使用TweenMax库。

这是我的HTML

<div class="container">
    <div class="logo_circles" id="logo1"><img src="img/logo_01.png"></div>
    <div class="logo_circles" id="logo3"><img src="img/logo_03.png"></div>
    <div class="logo_circles" id="logo2"><img src="img/logo_02.png"></div>
    <div class="logo_circles" id="logo4"><img src="img/logo_04.png"></div>
</div>

匹配的CSS ......

.logo_circles {
    text-align:center;
    margin-top:50px;
}

.logo_circles img {
    width:250px;
    height:auto;
    opacity:0.8;
}

/* Set height adjustments */
#logo2, #logo3, #logo4 {
    margin-top:-250px;
}

/* set horizontal position adjustments */
#logo1 {
    margin-left:-600px;
}

#logo2 {
    margin-left:-200px;
}

#logo3 {
    margin-right:-200px;
}

#logo4 {
    margin-right:-600px
}

Answer 1

您的页面会被滚动条推到最右侧，因为您需要在 .logo_circles 元素上使用位置：绝对，这将使您的文档流程中的元素..因此它不会影响徽标周围的标记。

.container {
     position:relative;
}

.logo_circles {
    position:absolute;
}

并使用CSS属性top，right，bottom，left而不是margin-right和margin-top。或者使用translateX（）和/或translateY来定位元素。

Answer 2

原来我需要使用css填充属性而不是margin ...

.logo_circles {
    text-align:center;
    margin-top:50px;
}

.logo_circles img {
    width:250px;
    height:auto;
    opacity:0.9;
}

/* Set height adjustments */
#logo2, #logo3, #logo4 {
    margin-top:-250px;
    /*width:250px;*/
    /*margin-right:auto;
    margin-left:auto;*/
}

/* set horizontal position adjustments */
#logo1 {
    /*margin-right:auto;*/
    /*width:250px;*/
    /*margin:0 auto;*/
    padding-right:600px;
}

#logo2 {
    padding-right:200px;
}

#logo3 {
    padding-left:200px;
}

#logo4 {
    padding-left:600px;
}

然后更新的Tween调用是......

TweenMax.from($('#logo1'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });
TweenMax.from($('#logo2'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });
TweenMax.from($('#logo3'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });
TweenMax.from($('#logo4'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });

如何在不推动页面边缘的情况下将元素向右移动？

2 个答案: