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

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");
   }

});

希望这可以帮助你......