javascript - 背景图像 全景

Question

我有一个关于滚动无休止地 self 重复的背景图像的问题。我遇到的问题是它开始很快，但很快变得越来越慢(口吃等)。这是代码:

var panoramaTimeOutId = null;
var panoramaPosition = null;
$('.panorama-left').mousedown(function() {
    panoramaTimeOutId = setInterval(function(){
        panoramaMove(8, 1)
    }, 50);
}).bind('mouseup mouseleave', function() {
       clearInterval(panoramaTimeOutId);
});
$('.panorama-right').mousedown(function() {
    panoramaTimeOutId = setInterval(function(){
        panoramaMove(8, 2)
    }, 50);
}).bind('mouseup mouseleave', function() {
        clearInterval(panoramaTimeOutId);
});
function panoramaMove(amount, direction)
{
    var panorama = document.getElementsByClassName('panorama_foto')[0];
    if(panoramaPosition == null)
    {
        panoramaPosition = panorama.style.backgroundPosition;
        panoramaPosition = parseInt(panoramaPosition[0].replace("px",""));
    }
    if(direction == 1)
    {
        panoramaPosition = panoramaPosition + amount;
        panorama.style.backgroundPosition = panoramaPosition+"px";
    }
    else
    {
        panoramaPosition = panoramaPosition - amount;
        panorama.style.backgroundPosition = panoramaPosition+"px";
    }
}

而且我已经尝试了一些优化方法。比如用标准 javascript 编写函数。仅计算一次 panoramaPosition，然后通过仅包含一个简单 int 的变量递增它。但它仍然口吃。

我也尝试过更改间隔时间和 px 的数量，但它在某些计算机上仍然卡顿。例如，该网站是为平板电脑设计的，它在我没有编程的电脑上卡顿。并且它必须在平板电脑上正常工作。

这是一个 JSbin 示例: http://jsbin.com/upociv/1/edit

希望有人可以提供有关如何优化此功能的提示或我将如何改进它的一般建议。

快速说明:Ipad (1/2/3) 所有 galaxy 平板电脑和 ie 8+ firefox chrome 等必须支持

Answer 1

与其将 panoramaPosition 移动的像素数不断增加，不如尝试将其移动 panoramaPosition %(图像宽度)。

这样一来，浏览器就不会试图从左侧 10,000 像素开始无形地平铺背景图像——相反，它永远不必平铺超过两次。 (您还将避免整数溢出错误的小但非零的可能性。)

if(direction == 1)
{
    panoramaPosition = panoramaPosition + amount;
    panorama.style.backgroundPosition = (panoramaPosition%1277)+"px";
}
else
{
    panoramaPosition = panoramaPosition - amount;
    panorama.style.backgroundPosition = (panoramaPosition%1277)+"px";
}

http://jsbin.com/upociv/2/edit

但是，如果您可以在 CSS3 中实现它，您应该 -- Modernizr让您可以在 JavaScript 中检测浏览器是否支持 CSS3 过渡和转换。