從屏幕頂部向下滑動全屏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並將滑塊加載到屏幕上

回答

相關問題