0

I have made a background with two images inside two divs next to each other that move across the screen using javascript. I made it originally to work with the divs being 2000px wide and thus the second div positioned 2000px left. I have now made an @media feature so it works with screen sizes.

The stylesheet is loading the @media properly, I have tested it by applying borders to it to show it works on the screen size. The Javascript is working, I have tested that. But the left position of it in the css doesn't change where the second div starts and there is always a gap.

This is part of the 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}

and this is the 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;
}

The rest can be seen on

http://jsfiddle.net/UkxLL

4

2 回答 2

0

我找到了一个相当不错的解决方案。我没有移动 div，而是将其中的图像作为背景位置移动。我现在已将左侧设置为永不移动，这太棒了.x

于 2013-07-25T00:28:47.290 回答
0

问题出在定位上，我将所有内容更改为：

position: absolute;

并添加了一些其他的twinks。看看jsfiddle。这是你想要的吗？

PS：下次确保你的 jsfiddle 工作......我不得不为 div 添加高度，因为小提琴将它设置为 0px，因此不显示任何内容。

编辑：我将第二张图片上的样式更改为：

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

再次检查 jsfiddle，如果它不起作用，请告诉我您使用的是什么浏览器。:)

于 2013-07-22T17:50:23.273 回答