Javascript 将div从父div展开到“中心”视口_Javascript_Jquery_Html_Css

Javascript 将div从父div展开到“中心”视口

javascript jquery html css

Javascript 将div从父div展开到“中心”视口,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我可以，但现在，我想展开“单击我”框的div开始，创建一个效果/错觉，即一个框从它一直增长到“中心”视口它应该跟随“单击我”框，比如说“单击我”框位于顶部，当用户单击它时，它也应该从顶部开始，然后一直延伸到“中心”视口下面是一个示例代码和一个来自JSFIDLE的示例代码。（请注意，仅用于显示将使主体具有滚动条的内容） HTML <div class="growme">test</div> <p>adsadsad</p> <p>a

所以我可以，但现在，我想展开“单击我”框的div开始，创建一个效果/错觉，即一个框从它一直增长到“中心”视口

它应该跟随“单击我”框，比如说“单击我”框位于顶部，当用户单击它时，它也应该从顶部开始，然后一直延伸到“中心”视口

下面是一个示例代码和一个来自JSFIDLE的示例代码。（请注意，

仅用于显示将使主体具有滚动条的内容）

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>

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

如果你想知道输出会是什么样子，我能找到同样的效果。

理论上，它应该通过使用CSS转换和改变框的宽度和高度，然后对它进行集中，并使div <代码>固定< /代码>，使其保持在页面的中间…这是我的尝试，虽然它并不完美

看一看这本书

$（'.box'）。在（'click'，函数（）{
$（'body'）.toggleClass（'nooverflow'）；
$（this.toggleClass（'grow'）；
});
.nooverflow{overflow:hidden；}
.盒子{
保证金：0自动；
高度：200px；
宽度：300px；
位置：绝对位置；
左：0；右：0；
背景色：#999；
过渡：0.3s；
}
.box.grow{
宽度：100%；
身高：100%；
背景：红色；
最高：50%；
转化：translateY（-50%）；
位置：固定；
}

ADSAD
ADSAD
ADSAD
点击我
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
adsad
我已经成功地完成了您想要做的事情，但是我必须注意，可能需要在盒子本身的定位上进行权衡。在我的解决方案中，框的默认位置是固定的，因此可能会遇到一些定位困难
回想起来，下面是我实现的代码，它显示了一个初始框，具有设置的宽度和高度，单击时向外扩展到整个页面，第二次单击时返回到其默认大小和位置
下面是我编写的HTML代码
<body>
    <div id="box"></div>
</body>

#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;
    }
  });
});

如果你想做的是让.growme
框从.box
框的中心开始生长，而不是从屏幕的中心开始生长，你需要做的是每次打开它时重置它的位置
怎么做？使用（获取文档中.box
的位置）和（获取滚动条的值），计算视口中.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
的目标位置（使用上面的公式）：

将.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');


这就应该做到了（对于收缩过程，您需要计算动画的目标顶部，请参见下面的代码）。下面是代码（我对溢出：隐藏部分进行了注释，以避免在滚动条消失时调整视口的大小）：

$（'.box'）。在（'click'，函数（）{
//将.growme div设置在.box div的中心
$（“.growme”）.css（{top:（100+$（this）.offset（）.top-$（window.scrollTop（））+“px”}）；
//$（'body'）.css（'overflow'，'hidden'）；
$（'.growme'）。设置动画({
宽度：“100%”，
高度：“100%”，
左:0,，
排名：0，
不透明度：1，
}‘正常’；
});
$（'.growme'）。在（'click'，函数（）{
//计算最高职位的目标
var目标=（100+$（“.box”）.offset（）.top-$（window.scrollTop（））+“px”；
$（此）。设置动画({
宽度：0，
高度:0,，
左：“50%”，
顶部：目标，
不透明度：0，
}，“正常”，函数（）{
//$（'body'）.css（'overflow'，'auto'）；
});
});
.growme{
背景色：#990000；
身高：0；
宽度：0；
位置：固定；
不透明度：0；
排名：0；
左：50%；
保证金：0；
}
.盒子{
保证金：0自动；
高度：200px；
宽度：300px；
背景色：#999；
}

测试
ADSAD
ADSAD
ADSAD
点击我
ADSAD
ADSAD
ADSAD
ADSAD
ADSAD
谢谢@Aziz，尽管距离够近了。是的，我同意拥有一个位置：fixed不会让你顺利过渡。我偶然发现（）的输出与我所寻找的相同。没问题，只是检查了tympanus演示，非常流畅。这篇文章解释了这一点——是的。。过渡太快了！但问题是，我不会/不能使用该插件，因为它不符合我的要求。比如说，我不想编辑/定制那个插件来满足我的需求。这就是我为什么要构建类似的东西的目的。谢谢@Swiper CCCVI。尽管问题在于，当主体包含将显示滚动条的内容时，div本身仍处于固定位置。（）据我所知，对于这样的动画，你不能两全其美。如果我真的遇到了这个问题的解决方案，我一定会让你知道，我的朋友，这太疯狂了！！！太完美了！！非常感谢您@Alvaro Montoro！！我一直在写这个f
$(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"});

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