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

所以我能够expand the div from the center of viewport但现在我想扩大开始为“点击我”框创建一个效果/错觉，一个盒子来自它增长所有通往中心视口的方式。将div从父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，它的效果相同。

来源

2015-10-05 basagabi

如果你想要做的是让.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部分，以避免视口的大小调整时滚动条消失）：

$('.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'); 
 
    }); 
 
});

.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; 
 
}

<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>

该解决方案完美的作品开始从中心日益增长的.growme DIV .box ...但有一个问题：增长与.box div不成比例，但对于视口比例，可能与.box（3x2）不一样。

对此的一种可能的解决方案是设置.growme，以便它“模仿”.box的位置和大小。它仍然没有成比例增长到它的大小，但它几乎看起来就像：

$('.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) 
 
    }); 
 
});

.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; 
 
}

<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>

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

来源

2015-10-05 13:38:22

这，我的朋友，是疯了！刚刚好！！非常感谢你@阿尔瓦罗蒙托罗！我已经为此编了好几天了！你是最好的！ – basagabi

理论上来说，它应该通过使用CSS过渡和改变盒子的宽度和高度，然后将其居中并使div保持在页面中间...这是我的尝试，它不是完美

看看在jsFiddle

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

.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; 
 
}

<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>

几点考虑：

从position:absolute到position:fixed
框中没有平稳过渡具有绝对定位，确保不破坏你的布局，您可能需要添加一个占位符DIV空间保存
添加跨浏览器的必要（过渡，变换，不透明度等）

编辑：我只是注意到，当箱子在折叠上方时，过渡更好，但是当它低于折叠（视口高度）时，箱子会到达中心瞬间增长

来源

2015-10-05 04:12:20 Aziz

谢谢@Aziz，尽管接近。是的，我同意有个'position：fixed'不会让你顺利过渡。我偶然发现了（http://tympanus.net/Blueprints/ZoomSlider/），它有我想要的相同输出。 – basagabi

没问题，只检查了鼓室演示，很漂亮。这篇文章解释它 - http://tympanus.net/codrops/2015/07/06/zoom-slider/ – Aziz

是的..过渡是soooo smooooth！但问题是我不会/不能使用该插件，因为它不符合我的要求。我们只是说，我不想编辑/定制插件，只是为了适应我的需求。这就是为什么我想要构建它的目的。 – basagabi

我已经设法完成你想要做的事情，但是我必须注意到，可能存在涉及盒子本身定位的折衷。在我的解决方案中，该框的默认位置为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。

来源

2015-10-05 04:15:36

谢谢@ Swiper-CCCVI。虽然问题是当身体内容会显示滚动条时，div本身仍然处于固定位置。（https://jsfiddle.net/sdy90yt5/1/）。 – basagabi

就我所知，当涉及到这样的动画时，你不能两面都有。如果我碰到这个问题的解决方案，我一定会让你知道的 –

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

回答

相关问题