0

JavaScriptを使用して画面上を移動する2つのdiv内に2つの画像が隣り合った背景を作成しました。私は元々 div の幅が 2000px であるため、2 番目の div は 2000px 離れた位置に配置するように作成しました。画面サイズで動作するように、@media 機能を作成しました。

スタイルシートは @media を適切にロードしています。画面サイズで動作することを示すために、それに境界線を適用してテストしました。Javascript は動作しています。私はそれをテストしました。しかし、css 内の左の位置は、2 番目の div の開始位置と変わらず、常にギャップがあります。

これはCSSの一部です：

@media (min-device-width: 800px) and (max-device-width: 1099px) {
#rotsky {position: fixed; bottom: 0px; width: 1400px; background: url('images/skybkm.jpg') no-repeat left bottom}
#rotsky2 {position: fixed; left: 1400px; bottom: 0px; width: 1400px; background: url('images/skybk2m.jpg') no-repeat left bottom}
}
#rotsky {left: 0px; height: 100%; z-index: -2}
#rotsky2 {height: 100%; z-index: -2}

そしてこれがJSです

function applywidth() {
    var screenwidth = getWidth();
    if (screenwidth <= "799") {
        skywidth = "1000";
    } else if (screenwidth >= "800" && screenwidth <= "1099") {
        skywidth = "1400";
    } else if (screenwidth >= "1100") {
        skywidth = "2000";
    }
}
function rotate() {
    newleft-=1.1;
    nawleft-=1.1;

    if (nawleft <= (0-skywidth)) {
        nawleft = skywidth;
    }
    if (newleft <= (0-skywidth)) {
        newleft = skywidth;
    }
    var nowleft = newleft + "px";
    var nuwleft = nawleft + "px";
    document.getElementById('rotsky').style.left=nowleft;
    document.getElementById('rotsky2').style.left=nuwleft;
}

残りはで見ることができます

http://jsfiddle.net/UkxLL

4

2 に答える 2

0

問題は、すべてを次のように変更した配置にありました。

position: absolute;

他のいくつかのイケメンを追加しました。jsfiddleを見てください。これはあなたが望んでいたものですか？

PS: 次回は、jsfiddle が機能することを確認してください... div に高さを追加する必要がありました。これは、フィドルが 0px に設定されているため、何も表示されないためです。

編集:2番目の画像のスタイルを次のように変更しました:

#rotsky2 {
    margin-left: -10px; 
    position: absolute; 
    top: 0; 
    height: 1000px; 
    z-index: -5; 
    left: 0;
}

jsfiddle をもう一度チェックしてみて、うまくいかない場合は、使用しているブラウザを教えてください。:)

于 2013-07-22T17:50:23.273 に答える
0

私はかなり素晴らしい解決策を見つけました。div を移動する代わりに、その中の画像を背景位置として移動しています。左が動かないように設定しましたが、素晴らしいです.x

于 2013-07-25T00:28:47.290 に答える