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

【问题标题】：How to move CSS background based on cursor/finger position without using background-position property?如何在不使用背景位置属性的情况下根据光标/手指位置移动 CSS 背景？
【发布时间】：2016-06-10 16:48:09
【问题描述】：

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

您可以在这里找到演示：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?) 的方法来根据光标/鼠标位置移动背景？

【问题讨论】：

我认为剪裁可能是不可避免的——除非你有一个特定的范围，否则不清楚你想要它是怎样的。你有工作演示或类似的东西吗？
@Aziz 我在问题中添加了一个演示链接

标签： css css-animations

【解决方案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 插件可以为你提供一些平滑的过渡和性能。

【讨论】：

感谢您的回答。问题是，我正在寻找一个无限的背景来移动而不是一个特定的元素来翻译。