创建对角链接(href)区域

Question

创建对角链接(href)区域

6

假设你有一个大小为50px × 50px的div/盒子

<div style="width: 50px; height: 50px;">
</div>

在这个框里，您想要有两个链接，它们对角线地分割它，就像这样。 Bisect

您可以使用旧的map/area HTML，但这是不可取的，因为jquery不能很好地与它配合使用...但这又是另一回事了。

我缺乏想法，真的很感激您对如何处理这种情况的帮助/见解。

- EasyCo

2个回答

3

我不确定你需要的灵活性，但你可以在这里看到一个解决方案：http://jsfiddle.net/nrabinowitz/KsCR9/

这个方案使用 CSS 来渲染三角形：

#triangles {
  border-color: darkblue darkblue steelblue steelblue;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
  display: block;
  cursor: pointer;
}

使用jQuery处理链接：

$('#triangles').click(function(e) {
    if (e.offsetX > e.offsetY) {
        console.log("Go to dark blue link!");
    } else {
        console.log("Go to light blue link!");
    }
});

- nrabinowitz

感谢您的输入，这是一种很好的CSS方式来渲染三角形！ - EasyCo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jere · Accepted Answer

使用jQuery非常简单，尤其是因为它是一个简单的y=x分割：

$("#clickMe").click(function(event){
    console.log(event);
    if(event.offsetX>event.offsetY){
        parent.window.location="http://bing.com";
    }else{
        parent.window.location = "http://google.com";   
    }
});

我们正在基于y=x函数（任何函数都可以）检测div中的区域。顺便说一下，我只是在jsfiddle上使用parent，因为代码在iframe中运行。

http://jsfiddle.net/JM6JC/4/

[更新]

好的，你问如何画一条相反方向的线。我认为更好的做法是稍微概括一下。这个问题只是一个不等式，你应该从小学数学中记住它[或多或少 :)]。如果没有，这里有一个视频： http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

我已经制作了一个更新的演示，其中包含一个"isAboveFunction"函数。它非常简单：它传入X、Y坐标，对X执行一个函数（在代数意义上），并确定结果是否大于Y。在所有大于Y的区域中，我们可以给那些区域着色并应用一些不同的逻辑。

还要记住，在计算机坐标中，X和Y从你屏幕的左上角开始。X（有时称为“左”）表示距离屏幕左侧的距离（或在此情况下表示距离框的左侧的距离）。同样，Y（或“顶部”）是距离顶部向下多远。

将这两个概念结合在一起，你可以创建任何想要的函数。我已经包含了一些示例，但随意尝试：

function isAboveFunction(x,y){
    var line;
    //CHANGE ME
    //line=x*x*.025;
    //line= 2*x;
    //line = -1*x+50;
    line= 200/x;

    if(y>line){
       return true;
    }else{
         return false;   
    }
}

http://jsfiddle.net/JM6JC/33/