Question

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

我想用对角线将左下角连接到右上角。无论是使用html / css还是使用背景图片，都无关紧要。我稍后会想出那部分。

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

这是一个棘手的部分：我想要一个不同的事情发生，取决于鼠标悬停在哪一侧。我会做一些像显示一些文字或改变背景颜色的东西。

这可以在网络编程中使用吗？我想过用一堆不可见的div进行“黎曼和”式计算。任何更简单的方法？

谢谢！

Answer 1

我能想到的唯一（简单）方法是使用img作为您的splittet框（或使用位于盒子顶部的相同尺寸的透明gif）并使用imagemap来定义diffenet领域

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

  <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形状（谷歌将帮助寻找语法）

Answer 2

你需要获得mouseX和mouseY位置，div底部和左边坐标，并解决一个简单的线性方程：

y
|   /
|  / y < (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 < 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

Answer 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>

Answer 4

有很多div和span组合在一起你可以做到但是从慢速连接变得太沉重了。您也可以使用背景图片并使用javascript

进行更改

最终解决方案是使用Flash，它将实现非常简单

Answer 5

黎曼总结？哇，你是硬核。

Checkout 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);

Answer 6

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

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

查看raphael.js库，以便轻松整合这个想法。

http://raphaeljs.com/

我过去曾经使用它，它可以很方便地沿路径，旋转和补间动画制作动画，无论你想在这里做什么，你对此都有点模糊。

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

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

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

有没有办法通过css / javascript进行倾斜/对角线鼠标悬停？

6 个答案: