我需要优化图片库滑块,因为很多浏览器都很难处理动画。
请考虑以下示例:
var $div1 = $('#div1'),
$div2 = $('#div2'),
$div3 = $('#div3'),
left = 0;
function animate() {
left -= 10;
$div1.css({
left: left + 'px',
width: 1000 - left + 'px'
});
$div2.css( 'left', left - 10 + 'px' );
$div3.css( 'left', left - 40 + 'px' );
}
setInterval( animate, 20 );
当然,这给很多浏览器带来了巨大的压力,它需要每 20 毫秒重绘 3 次!
有什么方法可以克隆三个 div,离线处理它们,然后它们一次替换所有它们,从而将重绘数量减少到一个?
如果您有其他建议,请随时分享。
谢谢!