Question

创建具有圆形形状的元素的最合理，跨浏览器兼容的方法是什么？这个元素将是不可见的，但是可点击=它将在已经有图像的背景上，所以我只需要创建一个不可见的虚构元素，使背景圆可以点击。

该元素不需要是<a>标记，因为click事件将仅使用jquery绑定，不需要向浏览器发送任何href。因此div会这样做。问题是：如何完成剩下的工作？

修改

实际上，我需要在每次点击时更改网址，但不要刷新网页，而是让网址可供用户复制。因此，如果我可以将div标记与jquery绑定，以将URL从base＃home更改为base #contact，那么一切正常。

EDIT2

我不需要jquery代码，我只需要html / css部分来创建元素。

Answer 1

好的，我可能会在这里咆哮错误的树......

要查找圆圈内的点击次数，您可以使用鼠标位置，然后找到圆圈原点的距离。

jQuery非常有用地提供了position()，它返回一个带有两个显示x和y位置的变量的对象，如果你知道你的图片有多大，那么如果鼠标用圆圈在使用毕达哥拉斯进入圆圈内就可以解决'定理。

类似的东西：

$(document).mousedown(function(e) {

   //img_element is your image...
   var img_pos = $("#img_element").position();

   //these are the coordinates for the center of the circle
   var centerX = img_pos.top + (img_width/2);
   var centerY = img_pos.left + (img_height/2);

   //this is the radius of your circle
   var radius = 100;

   if(Math.sqrt(Math.pow(e.clientX-centerX, 2) + Math.pow(e.clientY-centerY, 2)) < radius) {
       //here we do the things when the click is inside the circle
       console.log("yes");
   }

});

希望这可以帮助你...

Answer 2

如果您不介意简单的href：

<img src="background.gif" usemap="#mymap" />

<map name="mymap">
 <area shape="circle" coords="128,64,4" href="destination.htm">
</map>

Answer 3

也许这会给你一个提示：http://bavotasan.com/2011/circular-images-with-css3/

查看这些CSS属性：

border-radius
-webkit-border-radius
-moz-border-radius

Answer 4

非常简单，在你的css样式表中引用图像如下：

img {
   border-radius: 50%;
}

这将导致图像显示为圆形。

如何创建圆形的html / css元素？

4 个答案: