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

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鼠标移动函数和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插件，它们也会给你一些平滑的过渡和性能。