Question

我正在使用这样的backrground动画脚本：

$("body").bind('mousemove', function(e){

    $('#people').css({backgroundPosition: (e.pageX / 15 ) + 'px ' + (e.pageY / 15 - 100 ) + 'px' });
    $('#lady').css({backgroundPosition: (e.pageX / 10 ) + 'px ' + (e.pageY / 10 - 100 ) + 'px' });
    $('#city').css({backgroundPosition: (e.pageX / 30 ) + 'px ' + (e.pageY / 30 - 100 ) + 'px' });

});

一切都很好，除了表演......它真的很迟钝，特别是在歌剧，Chrome和FF ......在IE中，一切都很顺利。有谁知道，如何更好地表现这个小脚本？

您可以在此处查看效果：http://VisualStory.pl/test

Answer 1

mousemove功能只是做了太多工作。只要鼠标移动，就必须完成所有数学和字符串连接。这意味着每个像素。因此，如果我将鼠标移动一个中等距离，比如300px，那么代码必须执行300次。这会影响你的表现。

您可以尝试使用计时器，只运行数学说每30ms而不是每次鼠标移动。您是否尝试过完全不同的东西，比如HTML5画布？

Answer 2

在您提到的网站上，打开开发控制台，粘贴并执行以下代码：

$('body').unbind('mousemove');
people=$('#people'),lady=$('#lady'),city=$('#city');
people.dest={x:0,y:0},lady.dest={x:0,y:0},city.dest={x:0,y:0},
xPeople=0,yPeople=0,xLady=0,yLady=0,xCity=0,yCity=0;
$('body').bind('mousemove',function(e){
  people.dest={x:e.pageX/15,y:e.pageY/15-100};
  lady.dest={x:e.pageX/10,y:e.pageY/10-100};
  city.dest={x:e.pageX/30,y:e.pageY/30-100};
});
//clearInterval(myIntervalID);
myIntervalID=setInterval(function(){
  people.css({backgroundPosition:parseInt(people.dest.x)+'px '+parseInt(people.dest.y)+'px'});
  lady.css({backgroundPosition:parseInt(lady.dest.x)+'px '+parseInt(lady.dest.y)+'px'});
  city.css({backgroundPosition:parseInt(city.dest.x)+'px '+parseInt(city.dest.y)+'px'});
},16);

上面的代码是否产生了预期的结果？

以下是我对此方法的拙见：

仅{em>记录/存储 mousemove方法中的目标值。
然后使用setInterval（或更好的requestAnimationFrame和polyfill）将记录的值应用于相应的元素。

希望它有所帮助。

Answer 3

我稍微更改了代码，使用3D转换，性能要好得多，现在代码看起来像这样： var img3 = $（'＃lady'）; var img2 = $（'。img2'）; var img1 = $（'。img1'）; var overlay = $（'＃particles'）;

overlay.mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 10);
    var amountMovedY = (e.pageY * -1 / 20);
    img3.css({
  '-webkit-transform' : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-moz-transform'    : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-ms-transform'     : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-o-transform'      : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  'transform'         : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)'
});
});

overlay.mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 15);
    var amountMovedY = (e.pageY * -1 / 25);
    img2.css({
  '-webkit-transform' : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-moz-transform'    : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-ms-transform'     : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-o-transform'      : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  'transform'         : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)'
    });

});


overlay.mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 20);
    var amountMovedY = (e.pageY * -1 / 30);
    img1.css({
  '-webkit-transform' : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-moz-transform'    : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-ms-transform'     : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-o-transform'      : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  'transform'         : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)'
    });



});

jQuery背景动画 - 更好的性能

3 个答案: