Question

当我在整个区域中移动光标时，我对两个DIV产生视差效果-“商务卡”，这没关系！但是，当我使用手机并触摸该部分的任何位置时，也会触发此效果。我不想要这种效果，因为我可能会倾斜手机以获得视差。如何禁用对当前mousemove事件的任何触摸？

第二个问题与旋转设备有关。如果我沿任意轴旋转90度，我的卡片就会跳到起点，并在继续倾斜时重新开始视差，反之亦然。我可以为这个问题找到漂亮的解决方案吗？

var     genSection = document.querySelector('.general'),
        cardOne = document.getElementById('card1'),
        cardTwo = document.getElementById('card2'),
        shadow = document.querySelector('.c__shadow');


// On cursor move
genSection.addEventListener('mousemove', function(e){

        var pageX = e.clientX,
        pageY = e.clientY;

        cardOne.style.transform = 'translateX(' + pageX/50 + '%) translateY(' + pageY/40 + '%)';
        cardTwo.style.transform = 'translateX(' + pageX/150 + '%) translateY(' + pageY/250 + '%)';
        shadow.style.transform = 'translateX(' + pageX/150 + '%)';

});


// On accelerometer!
window.addEventListener('deviceorientation', function(e){

var   pageX = e.gamma,//Гамма - крутим вокруг оси Y
      pageY = e.beta; //Бета - крутим вокруг оси X

      cardOne.style.transform = 'translateX(' + pageX/2 + '%) translateY(' + pageY/4 + '%)'; 
      cardTwo.style.transform = 'translateX(' + pageX/2 + '%) translateY(' + pageY/5 + '%)';
      shadow.style.transform = 'translateX(' + pageX/2 + '%)';

    //Inverse in landscape
    if(window.innerWidth > window.innerHeight){
        cardOne.style.transform = 'translateX(' + pageY*2 + '%) translateY(' + pageX/4 + '%)'; 
        cardTwo.style.transform = 'translateX(' + pageY + '%) translateY(' + pageX/5 + '%)';
        shadow.style.transform = 'translateX(' + pageY + '%)';
    }

});

删除mousemove事件上的所有可触摸事件，并解决设备方向90度问题

0 个答案: