Question

即使在移动设备上，我也必须实现图像旋转。当前，如果我们将鼠标放在图像上可以模拟3D旋转，但是在移动设备上什么也不会发生。我看到我必须添加：如果（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');
});

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

   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";
            });
         }

Answer 1

在移动设备上，您需要监听touchmove或pointermove事件。有关相应的浏览器支持，请参见 caniuse ：Touch events，Pointer events

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

在移动设备上移动鼠标

1 个答案: