我的左側位置是由於某種原因沒有正確定位

我已經做了兩個圖像內兩個divs相鄰的使用javascript在屏幕上移動的背景。我最初使用2000像素寬的div來工作，因此第二個div位於2000px左側。我現在已經制作了@media功能，因此可以與屏幕尺寸一起使用。我的左側位置是由於某種原因沒有正確定位

樣式表正在正確加載@media，我已經通過應用邊界來測試它，以顯示它在屏幕上的大小。 Javascript正在工作，我已經測試過了。但是它在CSS中的左側位置並不會改變第二個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

來源

2013-07-22 Neil Philip Whitehead

你能發佈你的html嗎？最好在小提琴的鏈接？ – MGDTech

http://jsfiddle.net/UkxLL/ –

實際上演示問題的小提琴怎麼樣？你的小提琴顯示空白 –

我發現了一個相當好的解決方案。而不是移動div，我將其中的圖像作爲背景位置移動。我現在已將左側設置爲永不移動，而且非常棒.x

來源

2013-07-25 00:28:47

的問題是與可見定位我改變了一切：

position: absolute;

並添加了一些其他的twinks。看看jsfiddle。這是你想要的嗎？

PS：下次確定你的jsfiddle工作...我不得不增加高度的div，因爲小提琴設置爲0px，因此不顯示任何東西。

編輯：再次

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

檢查出的jsfiddle和您使用的，如果它不工作，告訴我是什麼瀏覽器：我改變了樣式的第2圖像上這一點。 :)

來源

2013-07-22 17:50:23

它仍然在我的電腦上顯示出天空之間的差距。在設置不同的分辨率之前，我已經使用了它。x –

我會再添加一件東西讓您檢查秒 –

我的左側位置是由於某種原因沒有正確定位

回答

相關問題