Question

我正在尝试使用带有jquery的javascript在div中创建一个无限滚动的图像。我正在使用的代码可以在小提琴HERE中看到。

这适用于当前浏览器，但在IE7中失败。我的猜测是它与分配负css值有关，但我还没有找到解决方案。有谁知道如何在ie7中获得chrome中的行为？

感谢您的帮助。

编辑：我已经得到了跨浏览器的效果，如果我将图像垂直向下滚动。可以看到HERE。

编辑2：我已经让它水平工作，但只是向右移动。它似乎不喜欢负面的方向价值。可以看到HERE。

Answer 1

我认为IE7仅支持'left'属性的整数值！

将您的功能更改为：

$(function(){
reelDivs($('.reel div'), 'left', 500, -500, -1, 30);
});

Answer 2

将您的CSS更改为此并开始使用：

.reel
{
    position: relative;
    top: 50px;
    left: 50px;
    width: 250px;
    height: 500px;
    overflow: hidden;
}

.reel div
{
    position: absolute;
    left: 0px;
    height: 362px;
    width: 500px;
    background: url("http://www.deviantart.com/download/258376230/husky_puppy_by_blackdelive-d49twdi.png") no-repeat 0px top;
}

.reel div.b
{
    left: 500px;
}

jsFiddle：http://jsfiddle.net/eGnMX/

神速！

Answer 3

在卷轴div上放置ID，而不是使用$('.reel div')使用ID。我很确定IE7不支持getElementsByClassName。

当你使用$('.reel div')时，你告诉jQuery使用getElementsByClassName。

Answer 4

如果像素是显示器可以渲染的最小尺寸，如何将图像移动0.1像素？

IE7不支持浮点测量，只要我知道（或至少没有像素，没有测试其他单位）。控制台记录返回的CSS左侧位置，您将看到IE7不返回浮点数。

使用1个像素移动并降低重绘率以使其在IE7中正常工作。或者甚至更好地利用像素移动与速率来获得所需的结果。像素运动越高越好。

在访问者计算机上重绘图像可能会很昂贵。即使您专门为游戏社区（通常拥有快速，高端系统）创建内容，我也不建议将其作为绝对要求。单独的图像滚动条可能会严重滞后于某些系统。

另外不要忘记大多数显示器的刷新率不会低于5ms。所以期待它比那更快地重新绘制是没有意义的

循环图像ie7问题

4 个答案: