从屏幕顶部向下滑动全屏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如果你去那里滚动到大拇指，就在标题为“更多信息”的框的正上方，你可以点击大拇指旁边的全屏按钮，观看现场失败。所以这是我需要帮助的第一件事。
第二部分加载我还没有尝试过的滑块，因为第一部分失败了，但我只是打算将滑块从这个html文档http://www.klossal.com/portfolio/space_fullscreen.html加载到使用以下jquery向下滑动的div中：
<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显示的位置，有什么方法可以控制它，理想情况下使它成为加载区域的中心吗？
有很多东西，但我认为它已经接近正常工作了？如果能帮上忙就太好了，谢谢。
回答 1
Stack Overflow用户
发布于 2012-10-28 04:58:59
使用jq.animate而不是full screen类，使用animate你可以提供所有这些css选项，并有更酷的效果。
https://stackoverflow.com/questions/11471623
复制相似问题
腾讯云开发者
