Question

所以我能够expand the div from the center of viewport但是现在，我想扩展div开始为“点击我”框创建一个效果/错觉，一个盒子从它一直增长到中心视口。

它应该遵循点击我的方框，比如让我们说点击方框位于顶部，当用户点击它时，它应该从顶部开始，然后逐渐增长到中心视口。

这里有一个jsFiddle和来自JSFiddle的示例代码。（请注意，<p>只是为了显示将使主体具有滚动条的内容）

HTML

<div class="growme">test</div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<div class="box"><h3>click me</h3></div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>

CSS

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: fixed;
    filter: alpha(opacity=0);
    opacity: 0;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}
.box {
    margin: 0 auto;
    height: 200px;
    width: 300px;
    background-color: #999;
}

Jquery的

$('.box').on('click', function () {
    $('body').css('overflow', 'hidden');
    $('.growme').animate({
        width: '100%',
        height: '100%',
        opacity: 1,
    }, 'normal');
});

$('.growme').on('click', function () {
    $(this).animate({
        width: 0,
        height: 0,
        opacity: 0,
    }, 'normal', function(){
        $('body').css('overflow', 'auto');
    });
});

如果你想知道输出是什么样的，我能够找到效果相同的this site。

Answer 1

如果您想要做的是让.growme框从.box框的中心增长，而不是从屏幕中心增长，您需要做的是重置其位置每次你要打开它。

怎么做？使用offset()（获取文档中.box的位置）和scrollTop()计算视口中.box元素的位置（以获取滚动条的值））。在伪代码中，它将是这样的：

position = element_height + element_offset - window_scroll

一旦你拥有了它，它就非常简单：

更新.growme的CSS，以便该框最初位于水平中心：

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: fixed;
    opacity: 0;
    top:0;
    left:50%;
    margin:0;
}

获取.growme的目标位置（使用上面的公式）：
```
100 + $(this).offset().top - $(window).scrollTop()
```

将.growme放在目标位置。

$(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"});

动画.growme，使其转到左上角，其宽度和高度占据100％。

$('.growme').animate({
        width: '100%',
        height: '100%',
        left:0,
        top:0,
        opacity: 1,
    }, 'normal');

这应该可以解决问题（对于缩小的过程，您需要计算动画的目标顶部，请参阅下面的代码）。这是代码（我评论了overflow:hidden部分，以避免在滚动条消失时调整视口大小）：

＆＃13;

$('.box').on('click', function () {

  // set the .growme div at the center of the .box div
  $(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"});

  //$('body').css('overflow', 'hidden');
  
  $('.growme').animate({
    width: '100%',
    height: '100%',
    left:0,
    top:0,
    opacity: 1,
  }, 'normal');
});

$('.growme').on('click', function () {
  
  // calculate the target goal for the top position
  var goal = (100 + $(".box").offset().top - $(window).scrollTop()) + "px";
  
  $(this).animate({
    width: 0,
    height: 0,
    left:"50%",
    top: goal,
    opacity: 0,
  }, 'normal', function(){
    //$('body').css('overflow', 'auto');
  });
});

＆＃13;

.growme {
  background-color: #990000;
  height: 0;
  width: 0;
  position: fixed;
  opacity: 0;
  top:0;
  left:50%;
  margin:0;
}
.box {
  margin: 0 auto;
  height: 200px;
  width: 300px;
  background-color: #999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="growme">test</div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<div class="box"><h3>click me</h3></div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>

＆＃13;

此解决方案非常适合从.growme的中心开始增长.box div ...但是有一个问题：增长与.box不成比例div，但视口比例，可能与.box（3x2）不同。

一种可能的解决方案是设置.growme，使其模仿＆＃34;模仿＆＃34; .box的位置和大小。它仍然不会与其大小成比例增长，但它几乎看起来像：

＆＃13;

$('.box').on('click', function () {

  $(".growme").css({ top: ($(this).offset().top - $(window).scrollTop()) + "px", left: "calc(50% - 150px)", width:300, height:200, zIndex:2 });

  //$('body').css('overflow', 'hidden');
  $('.growme').animate({
    width: '100%',
    height: '100%',
    left:0,
    top:0,
    opacity: 1,
  }, 'normal');
});

$('.growme').on('click', function () {
  var goaltop = ($(".box").offset().top - $(window).scrollTop()) + "px";
  var goalleft = window.innerWidth/2 - 150;
  $(this).animate({
    width: 300,
    height: 200,
    left:goalleft,
    top: goaltop,
    opacity: 0,
  }, 'normal', function(){
    //$('body').css('overflow', 'auto');
    $(this).css("z-index",-1)
  });
});

＆＃13;

.growme {
  background-color: #990000;
  height: 0;
  width: 0;
  position: fixed;
  opacity: 0;
  top:50%;
  left:50%;
  margin:0;
  z-index:-1;
}
.box {
  margin: 0 auto;
  height: 200px;
  width: 300px;
  background-color: #999;
  z-index:1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="growme">test</div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<div class="box"><h3>click me</h3></div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>

＆＃13;

如果你仍然希望按比例增长，可以检查this question and the selected answer，但请注意在你的情况下需要额外的计算（以确定视口是否处于纵向/横向模式并相应地执行效果）。

Answer 2

理论上它应该可以通过使用CSS过渡并更改框的宽度和高度，然后将其居中并使div fixed保持在页面中间...这是我的尝试，因为它并不完美

查看jsFiddle

＆＃13;

$('.box').on('click', function () {
    $('body').toggleClass('nooverflow');
    $(this).toggleClass('grow');
});

＆＃13;

.nooverflow {overflow:hidden;}

.box {
    margin: 0 auto;
    height: 200px;
    width: 300px;
    position:absolute;
    left:0; right:0;
    background-color: #999;
    transition:0.3s;
}
.box.grow {
    width:100%;
    height:100%;
    background:red;
    top:50%;
    transform: translateY(-50%);
    position:fixed;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<div class="box"><h3>click me</h3></div>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>
<p>adsadsad</p>

＆＃13;

需要考虑的一些要点：

没有从position:absolute到position:fixed
框具有绝对定位，请确保不会破坏您的布局，您可能需要添加占位符div以保留空间
在必要时添加跨浏览器（转换，转换，不透明等）

编辑：我刚注意到当盒子在折叠上方时，过渡效果更好，但当它低于折叠（视口高度）时，盒子立即移动到中心然后生长

Answer 3

我已经设法完成了你想做的事情，但我必须注意，可能需要权衡盒子本身的位置。在我的解决方案中，该框默认为fixed位置，因此可能会遇到一些定位困难。

回想一下，这里是我实现的代码，它显示了一个初始框，其中设置的宽度和高度在点击时向外扩展到整个页面，然后返回到它的默认大小和位置点击。

这是我写的HTML代码。

<body>
    <div id="box"></div>
</body>

这是我写的CSS代码。

#box {
    position: fixed;
    width: 300px;
    height: 200px;
    left: 50%;
    margin-left: -150px;
    background-color: #999;
}

以下是我编写的JavaScript代码，它完成了大部分的艰苦工作，因此我对其进行了大量评论。

// On document loaded
$(document).ready(function () {
  // Box starts not expanded
  var expanded = false;
  // On box click
  $('#box').on('click', function () {
    // If the box is not expanded
    if (!expanded) {
      // Animate the box
      $(this).animate({
        // Remove horizontal centering
        // This gives appearance of outward expansion
        left: '0',
        // Quotes on 'margin-left' for name errors
        'margin-left': '0',
        // Expand box to full page size
        width: '100%',
        height: '100%'
      });
      // Box is now expanded
      expanded = true;
    }
    // If the box is expanded
    else {
      // Change box to default position
      // Animate the box
      $(this).animate({
        // Restore horizontal centering
        // This gives appearance of inward shrinking
        left: '50%',
        // Quotes on 'margin-left' for name errors
        'margin-left': '-150px',
        // Expand box to normal size
        width: '300px',
        height: '200px'
      });
      // Box is now not expanded
      expanded = false;
    }
  });
});

here是我创建的一个JSFiddle，用于显示它在运行中。

将div从父div扩展到中心视口

3 个答案: