0

我正在创建活动页面，并在底部放置了许多徽标。它从右向左滑动。我不使用 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();
4

2 回答 2

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 转换，您不会卡顿。

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

于 2013-09-16T15:05:36.553 回答
1
  • 单个图像精灵而不是多个图像
  • CSS 过渡而不是 JS。CSS 是浏览器引擎的一部分，不需要修改 DOM 的属性，所以它应该更快

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

于 2013-09-16T15:14:33.317 回答