我已经制作了一个背景,其中两个图像在彼此相邻的两个div中使用javascript在屏幕上移动。我最初使用的是宽度为2000px的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;
}
其余的可以在
上看到答案 0 :(得分:0)
问题在于我将所有内容改为:
position: absolute;
并添加了一些其他的细节。看看jsfiddle。这是你想要的吗?
PS:下次确保你的jsfiddle工作......我不得不为div添加高度,因为小提琴将它设置为0px,因此不会显示任何内容。
编辑:我将第二张图片上的样式更改为:
#rotsky2 {
margin-left: -10px;
position: absolute;
top: 0;
height: 1000px;
z-index: -5;
left: 0;
}
再次检查jsfiddle,如果它不起作用,请告诉我你使用的浏览器。 :)
答案 1 :(得分:0)
我找到了一个相当不错的解决方案。我没有移动div而是将图像作为背景位置移动。我现在已将左侧设置为永不移动,并且它非常棒。