有什么方法可以通过 css/javascript 进行倾斜/对角鼠标悬停？答案

【问题标题】：Any way to do slanted/diagonal mouseovers via css/javascript?有什么方法可以通过 css/javascript 进行倾斜/对角鼠标悬停？
【发布时间】：2012-09-09 16:45:07
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

我已经在我的回答和评论中回复了你的问题:)

标签： javascript html css

【解决方案1】：

你需要得到mouseX和mouseY的位置，div的左下坐标，求解一个简单的线性方程：

是的 | / | /y &lt (imageHeight/imageWidth)*x | / |/ / - - - - - X

代码：


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 &lt 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

【讨论】：

谢谢。页面上会有 10 多个这样的内容，如果我不必使用大量的 javascript，我会有点犹豫。使用这种技术比图像地图有优势吗？
是的，有。您不会创建大量地图。您使用相同的函数，仅指定由 div 名称索引的 imageWidth 和 imageHeight 数组。将imageWidth替换为imageWidth[divid]，imageHeight也一样，传入divid作为参数，就这样:)

【解决方案2】：

我能想到的唯一（简单）方法是使用img 作为您的拆分框（或使用位于框顶部的相同大小的透明 gif）并使用图像映射来定义不同的区域。

在这里你可以看到一个简单的例子：

  <img src="image.png" width="345" height="312" border="0" alt="this is my image" usemap="#mymap">
  <map name="mymap">
    <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
    <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
  </map>

不同之处在于，您必须为您的区域使用 poligon 形状（谷歌会帮助寻找语法）

【讨论】：

酷，甚至不知道那些存在...三角形也是可能的...crosswinds-cadre.net/?page=imagemap#triangle Chrome 目前似乎有一个错误，状态栏没有弹出显示 URL就像普通链接一样。这很蹩脚，但它会做的。谢谢！
@cksubs，如果这是您的首选答案，您可以考虑接受它（单击左侧未填充的勾号）。
我知道如何接受答案。我正在查看下面的一些 CSS3 和 javascript 答案，我将决定哪个效果最好。
@cksubs，公平的；我看到“它会做”并跳了枪。我的坏 =)

【解决方案3】：

您可以使用 Javascript（+JQuery 让生活更轻松）来做到这一点。 Sample here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#div').mousemove(function (e) {
                    var div = $('#div');
                    var x = e.pageX; // Mouse position X (relative to window)
                    var y = e.pageY; // Mouse position Y
                    var w = div.width(); // Width of box
                    var h = div.height(); // Height of box
                    var xO = div.offset().left; // X position of box (relative to window)
                    var yO = div.offset().top; // Y position of box

                    var left = w/h*(yO-y)+xO+w > x;

                    $('#div').html(left ? 'left' : 'right');
                });
            })
        </script>
    </head>
    <body>
        <div id="div" style="width: 500px; height: 660px; border: 1px solid blue"></div>
    </body>
</html>

【讨论】：

【解决方案4】：

有很多 div 和 span 放在一起，你可以做到，但连接速度太慢了。您还可以使用背景图像并使用 javascript 更改它

最终的解决方案是使用Flash，它会很容易实现

【讨论】：

【解决方案5】：

黎曼和？哇，你是铁杆。

检查 CSS3 转换。如果您想支持较旧的浏览器/版本，浏览器兼容性可能是个问题。使用变换函数，并将给定的 div 旋转 X 度，您将得到一条斜线。然后只需在 Javascript 中设置鼠标悬停回调。

检查一个有效的example here。已在 Chrome 上测试，但也应适用于 Firefox 和 Safari。

html

<div id="slanted">..</div>

css

#slanted {
    transform: rotate(45deg);
}

javascript

var div = document.getElementById("slanted");
div.addEventListener('mouseover', function() {
    // so something
}, false);

【讨论】：

我喜欢这个答案，如果它有效，认为它是最简洁的。但是，有没有类似的方法来做一个三角形区域而不是一个旋转的矩形线？我的预期行为是为每个区域设置 :hover 状态，并将每个区域作为链接。不仅仅是在中间线上的鼠标悬停。虽然我喜欢 CSS3 的使用，但使用它来做我想做的事情会变得非常复杂（除非我遗漏了什么）。

【解决方案6】：

您可以使用 javascript 将其绘制为矢量图像，因为主流浏览器支持不同程度的矢量绘制。

您只需设置一个包含矢量图形的 html 块，然后插入您需要的任何内容。

查看 raphael.js 库，以便轻松集成此想法。

http://raphaeljs.com/

我过去使用过它，它对于沿路径、旋转和文本补间的动画非常流畅，无论您在这里尝试做什么，您对此都有些模糊。

作者声称它兼容回 IE6，但 IE 的矢量实现显然不支持浮点数，因此您可能会遇到某些动画组合的奇怪行为。

例如，我对旋转应用了 SHM/指数衰减缓动来模拟在风中摇晃的叶子。 IE 完全失败了，所以我不得不为那个 POS 浏览器使用线性缓动重写整个脚本。

但是，是的，因为它是基于 javascript 的，所有你熟悉的正常事件处理都可以应用于 raphael 生成的对象，就像你的 DOM 中的其他任何东西一样，这是 flash 做不到的.

【讨论】：