时间戳

首页 > 解决方案 > 移动设备上的鼠标移动

javascript - 移动设备上的鼠标移动

问题描述

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

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

标签： javascriptmousemove

解决方案

在移动设备上，您需要监听touchmoveorpointermove事件。对应浏览器支持见caniuse ：触摸事件、指针事件

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

推荐阅读