Question

我正在开发一个小应用，用户可以用鼠标或手指在屏幕上移动背景。

您可以在此处找到演示：http://kaleidoscope-experiment.herokuapp.com/

background-position由光标/手指的位置使用这种代码定义：

// mobile
position = e.touches[0].pageX + 'px ' + e.touches[0].pageY + 'px';

// desktop
position = e.pageX + 'px ' + e.pageY + 'px';

然而，我在手机和平板电脑方面存在显着滞后，背景是“剪裁”。

您是否知道background-position（transform？）是否有其他替代方法可以根据光标/鼠标位置移动背景？

Answer 1

如果你想自己滚动，只需使用jQuery mousemove功能和CSS3转换的组合。有点像这样：

$( "#target" ).mousemove(function( event ) {
    var msg = "Handler for .mousemove() called at ";
    msg += event.pageX + ", " + event.pageY;
    console.log( "<div>" + msg + "</div>" );
    $("#movingobject").css('transform', 'translate(' + event.pageY /4 + 'px,' + -event.pageX /4+ 'px)');
    });

这是我从stackoverflow获得的参考小提琴 http://jsfiddle.net/ZmZhw/

有许多可用的js插件可以为你提供一些平滑的过渡和性能。

如何在不使用background-position属性的情况下根据光标/手指位置移动CSS背景？

1 个答案: