Question

我对javascript还是很陌生，我正在学习构建程序。这可能是一个简单的解决方法，但是如何在较小的宽度上禁用视差图像上的功能（或禁用一般的特定js功能）？

这是我到目前为止无法正常工作，但显示“未定义”的内容。我一直在寻找解决方案已有好几天了。任何帮助将不胜感激。

  var paraLlaxS = document.querySelector("#firstImgc2");
  var paraLlaxS = document.querySelector("#secondImgc2");
  var paraLlaxS = document.querySelector("#backbox1");

  function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
  }

  window.addEventListener("DOMContentLoaded", scrollLoop, false);

  var xScrollPosition;
  var yScrollPosition;

  function scrollLoop() {

      xScrollPosition = window.scrollX;
      yScrollPosition = window.scrollY;

      setTranslate(0, yScrollPosition * -0.2, firstImgc2);
      setTranslate(0, yScrollPosition * 0.15, secondImgc2);
      setTranslate(0, yScrollPosition * -0.6, backbox1);

      requestAnimationFrame(scrollLoop); 


      if(window.innerWidth < 900) {
        document.querySelector('#firstImgc2').innerHTML = window.removeEventListener("DOMContentLoaded", scrollLoop, false);
        return;
      } else {

      }
}

Answer 1

您可以在函数开始时添加条件return。但是，如果宽度再次增加，您将需要收听以再次开始循环。

function scrollLoop() {
   if(window.innerWidth < 900)return;
   ...

Answer 2

我从另一个帖子中借了一个解决方案。 Listen for browser width for responsive web design?

此代码与各种浏览器兼容，因为获取的屏幕大小可能因浏览器而异。

Vector3 direction = Position - TargetPosition;
float distance = direction.Length();
float radius = 50000000f;

// Prevent the camera from entering the target.
if (distance <= radius * 1.5 && e.Delta > 0)
    return;

// Zooming out is always the same speed.
float speed = 3;
if (e.Delta > 0) {
    float t = (distance - 100) / (radius - 100);
    speed = 1000 - 997 / (1 + (float)Math.Exp(-10 * t)));
}

direction.Normalize();
Vector3 directionCopy = direction;
direction *= -(Math.Sign(e.Delta) * Math.Min(1000f, distance / speed));
Position = Position + direction;

删除浏览器宽度上的功能

2 个答案: