javascript - 背景图片全景图

我有一个关于背景图片滚动不断自我重复的问题。
我遇到的问题是开始速度很快，但是很快变得越来越慢(口吃等)。这是代码:

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编写函数一样。仅通过仅包含一个简单int的变量对其进行递增计数之前，仅计算一次全景全景位置。然而它仍然结结巴巴。

我还尝试更改了间隔时间和px的数量，但是在某些计算机上仍会结结巴巴。例如，该网站是专为平板电脑上的平板电脑而设计的，它在我不对其进行编程的PC上口吃。并且必须在平板电脑上正常工作。

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

希望有人可以提供有关如何优化此技巧的提示，或者是我将如何改进它的一般建议。

快速说明:所有银河系平板电脑都必须由Ipad(1/2/3)和8+ firefox chrome等支持。

最佳答案

而不是通过不断增加的像素数来移动PanoramaPosition，请尝试通过panoramaPosition % (image width)来移动它。

这样，您就不会让浏览器尝试从左向左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转换和转换。