Question

我正在创建活动的页面，在底部我放置了许多徽标。它从右向左滑动。我不使用jQuery，只使用纯Javascript而我只是想知道最佳性能。我的代码有效，但也许有更好的方法可以做到这一点？我认为这种“动画”有时会变慢。

var banners = [],
    links = [];

links[0] = 'http://...',
banners[0] = 'img/logo1.png',
...

var banLenght = banners.length,
    banContent = "<div id='bannersBack'><div id='banners' style='display:inline-block;'>";

for (var ii =0; ii < banLenght; ii++){
    banContent += "<a target='_blank' href='"+links[ii]+"'><img src='"+banners[ii]+"'></a>";
}
banContent += "</div></div>";
document.getElementById('sliding-logos').innerHTML = banContent;

var actual = document.getElementById('banners');
var move = function(){
    position = actual.offsetLeft;
    position -= 1;
    actual.style.left = position +"px";

    // 3000 is sum of banner's width                
    if (position > -3000) { 
        setTimeout( move, 20);
    }else {
        actual.style.left = "0px";
        move();
    }
};
move();

Answer 1

使用CSS转换+翻译可以获得最佳性能。现代浏览器将能够使用GPU进行转换。

.animation {
    transition: .25s ease-in-out;
    transition-property: transform, width;
}
.move {
    width: 200px;  // set width to 200px
    translateX(-200px); // move 200px to the left (always relative)
}

通常，如果您移动大图像或大型DOM节点，您会看到一些口吃。使用CSS转换，您可以获得 no 口吃。

如果你不能使用CSS转换（因为你需要它在IE8或更低版本中工作）我会使用jQuery的.animate。

Answer 2

单张图片精灵而不是多张图片
CSS Transitions而不是JS。 CSS是浏览器引擎的一部分，不必修改DOM的属性，因此它应该更快

这是一个例子（但它并不适用于所有浏览器） http://css-tricks.com/infinite-all-css-scrolling-slideshow/

滑动徽标 - 最好的方法

2 个答案: