0

嗨，我有一个正在使用的全屏滑块 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加载滑块 到那个 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>

我认为这会起作用，因为我在我网站的另一部分设置了这个，它可以工作，但我没有尝试过，唯一我认为会出错的是它会在动画完成之前加载，这很好只要它留在那个动画容器中并且不会自动全屏显示。我实际上使用这种加载方法遇到的另一个问题是控制 loading.gif 的显示位置，有什么方法可以控制它，理想情况下让它位于加载区域的中心？

那里有很多东西，但我认为它已经接近工作了吗？对此的任何帮助都会很棒，谢谢。

4

1 回答 1

1

使用jq.animate动画代替全屏类，您可以提供所有这些 css 选项并获得更酷的效果。

于 2012-10-27T20:58:58.563 回答