0

すべての Web コンテンツ (ページ) が 1 つの html ページにあるように、アンカーとハッシュを使用するコンテンツ用の左右の矢印が付いた Jquery スライダーを既に持っています。フルスクリーンの背景が必要で、CSS を使用して何かを動作させましたが、画像全体が表示されず、受け入れられない垂直スクロール バーが追加されました。そのバージョンはここにあります: ilandeistudio.com

そこで、Jquery を使用して別の方法を試しています: http://code.ttcon.hu/fullscrn/#!/instructions

これを機能させることはできますが、スライダー/複数の背景で機能させる方法がわかりません。説明では、setImage メソッドを呼び出すだけで、後で背景を変更できると書かれています。

fullScr.setImage("images/bg_about1.jpg");

これを行う方法や、正確にどこに行くべきかはよくわかりません。ここにテスト ページを作成しました: http://www.ilandeistudio.com/index06.html

右矢印をクリックすると、ilandeistudio.com に投稿した最初のリンクのように、次の背景に変更したい

4

2 に答える 2

0

Dojo ツールキットまたは fullscrn プラグインを使用せずに実行できます。

  1. img を div に配置し、ウィンドウに合わせてサイズを変更し、位置を固定し、z-index:-1 を設定します
  2. jQuery UI の $.hide() および $.show() を使用して、背景をスライドインおよびスライドアウトします。
  3. jQuery $.attr() を使用して img src を変更します

例：

<script>
$(function() {
    i=0;j=0;
    $("#sin").click(function(event) {
        if (i = i ? 0 : 1) $("#bgimg").show("slide", { direction: "right" }, 1000);
        else $("#bgimg").hide("slide", { direction: "right" }, 1000);
    });
    $("#changebg").click(function(event) {
        bgs = ['http://www.google.com/images/srpr/logo3w.png', 'http://col.stc.s-msn.com/br/sc/i/icons/BING_websearch_2.jpg'];
        $("#bgimg").attr('src', bgs[j = j ? 0 : 1]);
    });
});
</script>
<style>
#bg{z-index:-1;position:fixed;top:0;left:0;height:100%;width:100%;}
#bgimg{height:100%;width:100%;}
</style>
<button id="sin">Slide</button><button id="changebg">Change bg</button>

<div id="bg"><img src="http://www.google.com/images/srpr/logo3w.png" id="bgimg" /></div>
于 2012-04-20T03:02:05.410 に答える
0

このhtmlのフィドラーをチェックしました。

http://dl.dropbox.com/u/14028956/index06.html.txt

<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");
dojo.require("ttcon.fullscrn");
dojo.ready(function() {
    var fullScr = new ttcon.fullscrn({
      image: "images/bg_home1.jpg"
    });
    dojo.query(".special-anchor").onclick(function(){
      if(/home/.test(location.hash)){
        fullScr.setImage("images/bg_home1.jpg");
        return;
      }
      if(/about/.test(location.hash)){
        fullScr.setImage("images/bg_about1.jpg");
        return;
      }
    });
});
</script>

リファレンスとドキュメントを読む。

なぜこれほど多くの JavaScript ライブラリが使用されているのですか :(

于 2012-04-20T02:37:37.087 に答える