javascript - 从当前鼠标位置绘制三 Angular 形

Question

我目前有一个类别下拉菜单，当用户将鼠标悬停在主类别上时，它会加载子类别。

<div class="all-categories">
  <li><a href="#">Category 1</a></li>
  <li><a href="#">Category 2</a></li>
  <li><a href="#">Category 3</a></li>
  // More categories here
</div>

我想为我的下拉菜单创建一个安全点，以避免不必要的子菜单更改，这与亚马逊的做法类似。

![两个木偶][1]

我目前正在使用以下函数跟踪光标悬停在 .all-categories 上时的位置:

function handleMouseMove(event) {
    var eventDoc, doc, body;

    event = event || window.event; // IE-ism

    // If pageX/Y aren't available and clientX/Y are,
    // calculate pageX/Y - logic taken from jQuery.
    // (This is to support old IE)
    if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
    }

    // Use event.pageX / event.pageY here
    console.log(event.pageX + ", " + event.pageY);
}

jQuery(document).ready(function () {
  document.querySelector(".all-categories").onmousemove = handleMouseMove;

});

现在，我怎样才能从我的光标位置到 .all-categories div 的右上角和右下角创建一个三 Angular 形？

非常感谢任何帮助。 :)

Answer 1

你需要像这样用 position: absolute 创建三 Angular 形元素

#triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 100px 100px 100px 100px ;
    width:0;
    height:0;
}

<div id="triangle"></div>

然后将鼠标事件附加到 document 而不是 .all-categories

jQuery(document).ready(function() {
  var Triangle, boxCoords, boxWidth, boxHeight;
  boxCoords = $(".all-categories")[0].getBoundingClientRect();
  //console.log(rect.top, rect.right, rect.bottom, rect.left);
  boxWidth = parseInt(boxCoords.right - boxCoords.left);
  boxHeight = parseInt(boxCoords.bottom - boxCoords.top);
  Triangle = $('#triangle');
  Triangle.css('top', boxCoords.top + 'px');
  
  $(document).on("mousemove", function(event) {
    // if outside the box return
    if (event.pageX < boxCoords.left || event.pageX > boxCoords.right ||
      event.pageY < boxCoords.left || event.pageY > boxCoords.bottom) {
      //Triangle.hide();
      return;
    }

    //Triangle.show();
    var triangleBorder = (event.pageY - boxCoords.top) + 'px ';
    triangleBorder += (boxWidth - (event.pageX - boxCoords.left)) + 'px ';
    triangleBorder += (boxCoords.bottom - event.pageY) + 'px ';
    triangleBorder += (event.pageX - boxCoords.left) + 'px';
    Triangle.css('border-width', triangleBorder);
  });
});

html,body {margin: 20px}
.all-categories {
  border: 1px solid #ddd;
  display: inline-block;
  padding-right: 20px;
  box-sizing: border-box;
}
li {margin: 10px 5px}
#triangle {
  position: absolute;
  border-color: transparent rgba(3, 169, 244, 0.58) transparent transparent;
  border-style: solid;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="all-categories">
  <li><a href="#">Category 1</a></li>
  <li><a href="#">Category 2</a></li>
  <li><a href="#">Category 3</a></li>
  <li><a href="#">Category 4</a></li>
  <li><a href="#">Category 5</a></li>
  <li><a href="#">Category 6</a></li>
  <li><a href="#">Category 7</a></li>

</div>
<div id="triangle"></div>