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

嗨，我正在使用全屏滑块，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如果你去那里滚动到大拇指，在标题为“多一点信息”的框上方，你可以点击大拇指旁边的全屏按钮，看它现场失败。所以这是我需要帮助的第一件事。

第二部分加载，因为第一部分失败我还没有尝试过的滑块，但我只是打算从这个网站文档http://www.klossal.com/portfolio/space_fullscreen.html加载滑块成的div滑下使用这个jQuery：

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

我认为这会工作，因为我有这个建立在我的网站的另一部分，它的作品，但我没试过，我想那会出问题的唯一事情是它会加载德动画完成之前只要它保持在该动画容器中并且不会自动进入全屏状态即可。我用这种加载方法实际上遇到的另一个问题是控制load.gif显示的位置，以任何方式控制它，理想地使它成为加载区域的中心？

很多东西在那里，但我认为它接近工作？任何帮助，这将是伟大的，谢谢。

来源

2012-07-13 loriensleafs

使用jq.animate，而不是具有全屏类，有生命的，你可以给所有的CSS选择，并有更多很酷的效果。

来源

2012-10-27 20:58:58 Vlad

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

回答

相关问题