Question

我正在处理的页面具有倾斜效果，这会影响网站主体的方向。我想在页面到达移动视口时关闭它;我已经看过并尝试过一些东西，但似乎无法获得我想要的效果。下面的代码是我正在使用的。该脚本与我的主JS代码分开运行。

window.addEventListener("mousemove",function(e) {

  var width = window.innerWidth;
  var height = window.innerHeight;
  var clientHeight = document.body.clientHeight;
  var skew = {};
  skew.y = (20 * ((e.x / width) - 0.5));
  skew.x = -(20 * ((e.y / height) - 0.5));

  document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)";

});

Answer 1

CSS更改不会自行删除，因此如果浏览器窗口低于所需大小，则必须手动删除转换。

检查窗口调整大小，

window.addEventListener('resize', function() {
  if (window.innerWidth < 568) {
    document.body.style.webkitTransform = '';
  }
});

如果用户移动鼠标，也请确保不要重新应用它。

// This is the function you already have
window.addEventListener('mousemove', function(e) {
  if (window.innerWidth < 568) {
    return;
  }
  ...
}

如何禁用内部窗口宽度的JavaScript

1 个答案: