Question

嗨我有一个我使用的全屏滑块，RoyalSlider。我有一个页面上有一些图像，我想要发生的是当你点击全屏按钮时，全屏div从顶部向下滑动覆盖整个页面，滑块通过Jquery加载到该div中。

以下是我试图完成此任务的方式。我有一个div，我为它做了两个课程：

.fullscreen_hide{
-webkit-transition-property: all; 
-webkit-transition-duration: 1s; 
-webkit-transition-delay: 0s;
width:100%;
height:0%;
background:#141414;
position:aboslute;
z-index:50000000;
}
.fullscreen_show{
-webkit-transition-property: all; 
-webkit-transition-duration: 1s; 
-webkit-transition-delay: 0s;
width:100%;
height:100%;
background:#141414;
position:aboslute;
z-index:50000000;
}

我正在交换这些类，并希望webkit转换能够进行动画制作，尽管这根本不起作用。由于某种原因，它不会从顶部向下滑动并覆盖整个页面，它只是将页面向上滚动到div向下移动大约一个屏幕高度的顶部，但不覆盖整个页面。

http://www.klossal.com/portfolio/index_current_alt.html如果你去那里滚动拇指，在标题为“更多信息”的方框的正上方，你可以点击拇指旁边的全屏按钮，看着它失败了。所以这是我需要帮助的第一件事。

加载滑块的第二部分我还没试过，因为第一部分失败了，但我只是将这个html doc http://www.klossal.com/portfolio/space_fullscreen.html中的滑块加载到使用这个jquery向下滑动的div中： / p>

<script type="text/javascript">
$(function() {
$("#color_launch").click(function() {
    $('#fullscreen')
       .html('<img src="http://www.klossal.com/loader.gif" style="padding-   
bottom:1000px;"/>')
       .load('http://www.klossal.com/portfolio/space_fullscreen.html');
});
});
</script>

我认为这会有效，因为我在我的网站的另一部分设置了这个，并且它可以工作，但是我还没有尝试过，我唯一能想到会出错的是它会在动画完成之前加载只要它停留在动画容器中并且不会自动全屏显示就可以了。我实际上使用这种加载方法的另一个问题是控制loading.gif出现的位置，任何控制方式，最好使它成为加载区的中心？

那里有很多东西，但我觉得它接近工作了？对此有任何帮助都很棒，谢谢。

Answer 1

使用jq.animate而不是全屏类，通过动画，您可以提供所有这些css选项并拥有更酷的效果。

从屏幕顶部向下滑动全屏幕div并将滑块加载到其中

1 个答案: