css - 如何在不使用 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 得到的引用 fiddle http://jsfiddle.net/ZmZhw/

有许多可用的 js 插件，它们也会为您提供一些平滑的过渡和性能。