时间戳

首页 > 解决方案 > 禁用类似媒体查询的 javascript

javascript - 禁用类似媒体查询的 javascript

问题描述

我有一个旋转我的 div 的脚本，但是当我的屏幕小于 600px 时我想禁用 js，这是旋转 div 的代码：

var form = document.getElementById('survey-form');

form.addEventListener('mousemove', (e) =>{
    var x = (window.innerWidth / 2 - e.pageX) / 200;
    var y = (window.innerHeight / 2 - e.pageY) / 200;

    form.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
});

form.addEventListener('mouseleave', function(){
    form.style.transform = 'rotateX(0deg) rotateY(0deg)';
});

我试过这个

$(window).resize(function() {
    if ($(window).width()>600){
    var form = document.getElementById('survey-form');

form.addEventListener('mousemove', (e) =>{
    var x = (window.innerWidth / 2 - e.pageX) / 200;
    var y = (window.innerHeight / 2 - e.pageY) / 200;

    form.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)'
});

form.addEventListener('mouseleave', function(){
    form.style.transform = 'rotateX(0deg) rotateY(0deg)';
});
}

但代码只是停止在所有屏幕上工作。

标签： javascript

解决方案

它停止是因为您正在检查$(window).width()>600. 这意味着如果屏幕宽度大于600 像素，并且您正在寻找小于600 像素的目标屏幕。所以只需将其切换$(window).width() > 600到此$(window).width() < 600

推荐阅读