Question

我有此代码，问题是未显示“主”和“左/右”图像。我已经遍历了整个逻辑，无法弄清楚出什么问题了。

如果我将else替换为else if(flag===1 && child[I].id=="left" || child[I].id=="right")，该代码将起作用

预期输出：鼠标移动会改变图像，这种改变取决于<body>元素的高度。

输出得到：仅显示一张图像，并且我将鼠标移到任何位置都不会改变。

[还将事件从“ mouseover”更改为“ mousemove”也无济于事]

那么为什么当我删除它时它不起作用，至少不应该“主要”起作用？

PS：我无法提供图片，请另找一张图片。

'use strict';
(function() {
    var wlen = screen.availWidth;
    var whet = screen.availHeight;
    var last = {};
    var chk = 3;
    var eye = document.getElementsByClassName("eyes");

    var build = function(ele) {

        if (ele.previousElementSibling !== null) ele.previousElementSibling.style = "none";
        last = ele.style;

        last.display = "block";


    }

    var anite = function() {
        var x = event.screenX;
        var y = event.screenY;
        last.display = "none";
        var child;
        var flag;
        y < whet / 3 ? flag = 2 : (y > 2 * whet / 3) ? flag = 0 : flag = 1;

        x < wlen / 2 ? child = eye[1].childNodes : child = eye[0].childNodes;
        for (let i = 0; i < child.length; i++) {
            if (child[i].id) {
                if (child[i].id == "main" && flag === 0) {
                    build(child[i]);

                } else if (child[i].id.search(/a/i) === 0 && flag === 2) {
                    build(child[i]);

                } else {
                    build(child[i]);

                }
            }

        }
    }
    document.addEventListener("mouseover", anite, false);

})()

html,body {
   height: 100%;
}

 body {
   display: flex;
   align-items: center;
}

 main {
   width: 100%;
   overflow: hidden;
}

 .eyes {
   width:50%;
   float: left;
   height: 300px;
}

 #main {
   background: url('eyes.png') no-repeat 0 0;
   width: 1000px;
   height: 254px;
   display:none;
}

 #left {
   background: url('eyes.png') no-repeat 0 -254px;
   width: 1000px;
   height: 254px;
   display:none;
}

 #aLeft {
   background: url('eyes.png') no-repeat 0 -508px;
   width: 1000px;
   height: 254px;
   display:none;
}

 #right {
   background: url('eyes.png') no-repeat 0 -762px;
   width: 1000px;
   height: 254px;
   display:none;
}

 #aRight {
   background: url('eyes.png') no-repeat 0 -1016px;
   width: 1000px;
   height: 280px;
   display:none;
}

<html>
  <head>
      <title>Student Details</title>
  </head>

  <body>
      <main>
          <div class="eyes">
              <!-- <img src="eyes.png" alt="eyes"> -->
              <p id="main"></p>
              <p id="right"></p>
              <p id="aRight"></p>
          </div>
          <div class="eyes">
              <p id="main"></p>
              <p id="left"></p>
              <p id="aLeft"></p>
          </div>
      </main>
  </body>
</html>

图片脚本未显示

0 个答案: