移动设备上的鼠标移动答案

【问题标题】：Mousemove on mobile devices移动设备上的鼠标移动
【发布时间】：2019-01-28 14:38:51
【问题描述】：

即使在移动设备上，我也必须实现图像的旋转。目前，如果我们将鼠标放在图像上模拟 3D 旋转，但在移动设备上没有任何反应。我看到我必须添加： if (window.DeviceMotion) {// 做点什么} 但我不明白如何实现它。有没有人有任何想法？谢谢

use strict';

$(document).on('mousemove', function (e) {
$('.light').css({
left: e.pageX - 300,
top: e.pageY - 300
});
});


var el = $('.js-tilt-container');


el.on('mousemove', function (e) {
var _$$offset = $(this).offset();


var left = _$$offset.left;
var top = _$$offset.top;


var cursPosX = e.pageX - left;
var cursPosY = e.pageY - top;
var cursFromCenterX = $(this).width() / 2 - cursPosX;
var cursFromCenterY = $(this).height() / 2 - cursPosY;


$(this).css('transform', 'perspective(500px) rotateX(' + cursFromCenterY / -40 + 'deg) rotateY(' + -(cursFromCenterX / -40) + 'deg) translateZ(-45px)');


var invertedX = Math.sign(cursFromCenterX) > 0 ? -Math.abs(cursFromCenterX) : Math.abs(cursFromCenterX);


//Parallax transform on image
$(this).find('.js-perspective-neg').css('transform', 'translateY(' + cursFromCenterY / 10 + 'px) translateX(' + -(invertedX / 10) + 'px) scale(1.15)');


$(this).removeClass('leave');
});


el.on('mouseleave', function () {
$(this).addClass('leave');
});

好的，谢谢。我尝试以各种方式设置“设备方向”代码，但它不起作用。我使用了这些变量。我如何将它们集成到我的代码中？谢谢

   if (!('ondeviceorientation' in window)) {
            document.getElementById('do-unsupported').classList.remove('hidden');
         } else {
            document.getElementById('do-info').classList.remove('hidden');

            window.addEventListener('deviceorientation', function(event) {
               document.getElementById('cube').style.webkitTransform =
               document.getElementById('cube').style.transform =
                       'rotateX(' + event.beta + 'deg) ' +
                       'rotateY(' + event.gamma + 'deg) ' +
                       'rotateZ(' + event.alpha + 'deg)';

               document.getElementById('beta').innerHTML = Math.round(event.beta);
               document.getElementById('gamma').innerHTML = Math.round(event.gamma);
               document.getElementById('alpha').innerHTML = Math.round(event.alpha);
               document.getElementById('is-absolute').innerHTML = event.absolute ? "true" : "false";
            });
         }

【问题讨论】：

.addEventListener("touchmove", func);

标签： javascript mousemove

【解决方案1】：

在移动设备上，您需要监听 touchmove 或 pointermove 事件。对应浏览器支持见caniuse：Touch events,Pointer events

顺便说一句，从用户体验的角度来看，您可能想尝试根据设备方向（deviceorientation 事件）进行旋转，而不是触摸。

【讨论】：