0

こんにちは私は使用しているフルスクリーンスライダー、RoyalSliderを持っています。私はいくつかの画像を含むページを持っています。私が起こそうとしているのは、フルスクリーンボタンをクリックすると、フルスクリーンdivがページ全体をカバーする上から下にスライドし、スライダーがJqueryを介してそのdivに読み込まれることです。

これが私がこれを達成しようとしていた方法です。私は2つのクラスを作った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が画面の高さの約1つ下に移動したところまでページを上にスクロールするだけですが、ページ全体をカバーするわけではありません。

http://www.klossal.com/portfolio/index_current_alt.html そこに行って親指までスクロールすると、「もう少し情報」というタイトルのボックスのすぐ上で、親指の横にあるフルスクリーンボタンをクリックして、失敗するのを見ることができます。住む。それが私が最初に助けを必要とすることです。

スライダーをロードする2番目の部分最初の部分が失敗したため、まだ試していませんが、この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>

これは私のサイトの別の場所に設定されているのでうまくいくと思います、そしてそれはうまくいきます、しかし私は試していません、私がうまくいかないと思う唯一のことはそれがアニメーションが終了する前にロードされることですそれは素晴らしいですそれがそのアニメーションコンテナ内にとどまり、自動的にフルスクリーンにならない限り。この読み込み方法で実際に抱えていたもう1つの問題は、loading.gifが表示される場所を制御することでした。それを制御する方法はありますか？理想的には読み込み領域の中心にしますか？

そこにはたくさんのものがありますが、私はそれがほぼ機能していると思いますか？これに関するどんな助けも素晴らしいでしょう、ありがとう。

4

1 に答える 1

1

フルスクリーンクラスの代わりに使用jq.animateすると、animateを使用して、これらすべてのcssオプションを指定し、よりクールな効果を得ることができます。

于 2012-10-27T20:58:58.563 に答える