Mousemove на мобильных устройствах - PullRequest
Новая
       8

Mousemove на мобильных устройствах

0 голосов
/ 28 января 2019

Мне нужно реализовать поворот изображения даже на мобильных устройствах.В настоящее время, если мы поместим мышь на изображение, имитирует трехмерное вращение, но на мобильных устройствах ничего не происходит.Я видел, что я должен добавить: 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');
});

ОК, спасибо.Я пытался настроить код «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";
            });
         }

1 Ответ

0 голосов
/ 28 января 2019

На мобильном устройстве вам нужно прослушивать события touchmove или pointermove.Информацию о поддержке браузера см. В caniuse : События касания , События указателя

Кстати, с точки зрения пользовательского опыта вы можете захотетьпопробуйте вращаться в зависимости от ориентации устройства (событие deviceorientation), а не касания.

...