Question

我怀疑这可能很容易回答，并且有一些显而易见的我不知道，但我现在有点亏。我有一个div在后台有一个图像。当点击时，我有另一个div（形状为通过border-radius的圆圈），我想从第一个div的中心扩展，越过div的边界，有效地将其圆圈擦拭为一种颜色。让圆圈展开是没有问题的，但是（可能是因为圆圈在初始div中居中的方式）我似乎无法让它扩展到左/上边界 - 一旦它击中它们，它继续向右和向下扩展。

这是简单的动画代码：

$(".projectContainer").click(function(){
  $(".circle").animate({
        width:'+=600px',
        height:'+=600px'},600);
});

HTML：

<div class="projectContainer" id="A Head In The Box">
    <div class="circleContCont"><div class="circleCont">
            <div class="circle"></div>
    </div></div>
</div>

和各种元素的CSS：

.projectContainer {
   width:384px;
   height:288px;
   max-width:100%;
   background-color:#FFF;
   background-position: center center;
   display:inline-block;
   margin:7px;
   overflow:hidden;
}
.circleContCont {
   display:table;
   height:100%;
   width:100%;
   vertical-align:middle;
}

.circleCont {
   overflow:hidden;
   display:table-cell;
   vertical-align:middle;
}

.circle {
   width:0px;
   height:0px;
   margin-left: auto; 
   margin-right: auto;
   background: #FFF;
   border-radius: 50%;
   z-index:2;
}

中心代码取自here，因为我无法以任何其他方式使其工作。虽然看起来有点混乱，但可能有一种更简单的方法。

编辑：将圆圈的位置设置为绝对值并设置顶部和左侧值（ - = 300px）后，圆圈现在可以移动到包含div之外。但是，我不能让它保持中心。 Here's一段视频展示了它的运作方式，here's一段视频展示了它现在是如何运作的。

Answer 1

绝对定位您的圈子，然后使用以下代码制作动画效果

$(".projectContainer").click(function(){
  $(".circle").animate({
      width:'+=600px',
      left:'-=300px',
      top: '-=300px',
      height:'+=600px'
   },600);
});

选中此项，点击圈子

$(".circle").click(function() {
  $(".circle").animate({
    'width': '+=600px',
    'left': '-=300px',
    'top': '-=300px',
    'height': '+=600px'
  }, 600);
});

.circle {
  height: 100px;
  width: 100px;
  background-color: black;
  position: absolute;
  left: 100px;
  top: 100px;
  border-radius: 1000px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>

从中心向外扩展元素，忽略div边界

1 个答案: