如何根据鼠标 above/below x=y 行的位置使图像不显示？

Question

我的网站现在基本上是这样的：https://manhattan.superhi.com/ and I would like to be able to access the bottom layer triangle that is covered by a transparent square artboard of the top triangle. The goal is to make it work like this: Layout

我不确定如何将 y=x 线方程合并到代码中并将显示设置为 0。如果有任何想法，我将不胜感激。

Answer 1

这是一个简化的例子：

鼠标移到左上角时会显示跨度。当然，这是为了向您展示“数学”，而不是一个精确的解决方案。

// Get Elements from HTML
const div = document.querySelector('div');
const span =  document.querySelector('span');

// When ever the the mouse moves within the element you want, here, the div.
div.onmousemove = function clickEvent(e) {
      // e = Mouse click event.
      var rect = e.target.getBoundingClientRect(); // Get the bounding rectangle for the element

      // position within the div = (e.clientX - rect.left), this
      // position has its origin point in the top left. We can make the 
      // origin in the center by subtracting half to width aand 
      // height from the left x and y respectively
      var x = (e.clientX - rect.left) - (rect.width / 2);
      var y = (e.clientY - rect.top) - (rect.height/ 2);  
      
      // Here we check if mouse is in the top left "triangle" of 
      // the square element, where, -position.x > position.y.

      // change this to get different "triangles"
      if(-x > y) {
        span.style.opacity = '1'
      } else {
        span.style.opacity = '0'
            }
}

body {
  background: white; /* try type yellow */
  color: #323232;

  margin: 0;
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: Helvetica neue, roboto;
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  
  position: absolute;
  top: 0;
  left: 0;
}

span {
  width: 100px;
  height: 100px;
  background-color: blue;
  
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* top element starts off as hidden */
  pointer-events: none; /* Important so that the mouse event can "go through" the top element */
}

<div></div>

<span></span>

如何根据鼠标 above/below x=y 行的位置使图像不显示？

How to make an image not display depending on position of the mouse above/below x=y line?

javascript

equation

display