javascript - 有什么方法可以通过 css/javascript 进行倾斜/对 Angular 线鼠标悬停吗？

Question

我有一个通过 html 边框构建的框。

我想用对 Angular 线连接左下角和右上角。无论是使用 html/css 还是使用背景图片，都没有关系。我稍后会弄清楚这部分内容。

------
-   /-
-  / -
- /  -
-/----

这是棘手的部分:我希望根据鼠标悬停在直线的哪一侧来发生不同的事情。我会做一些事情，比如使一些文本可见或更改背景颜色。

这在网络编程中可能吗？我想过用一堆不可见的 div 进行“黎曼和”类型的计算。有什么更简单的方法吗？

谢谢!

Answer 1

您需要获取 mouseX 和 mouseY 位置、div 底部和左侧坐标，并求解一个简单的线性方程:

y|   /|  / y < (imageHeight/imageWidth)*x| /|//----------x

code:

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }
//source: blog.firetree.net/2005/07/04/javascript-find-position/

//definition of widths and heights:
var imageWidth = [];
var imageHeight = [];
imageWidth["one"] = 100;
imageHeight["one"] = 300;

imageWidth["two"] = 200;
imageHeight["two"] = 300;
//etc

function checkClick(divId) {
    var posx = 0;
    var posy = 0;
    var e = window.event;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {  
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }
    // source of mouse position: www.quirksmode.org/js/events_properties.html#position

    valX = posx - findPosX(document.getElementById(divId));
    valY = posy - (document.getElementById(findPosY(divId))+imageHeight[divId]); //we need to get the bottom-left corner
    if(valY < posX*imageHeight[divId]/imageWidth[divId]) {
    //we are below the line - in lower part of the div
    }
    else {
        //we are in the upper part
    }}

就是这样。您只需要添加 checkClick 作为 onmouseover 的处理程序并设置 imageWidth 和 imageHeight