2022-09-20HTML00
请注意,本文编写于 579 天前,最后修改于 579 天前,其中某些信息可能已经过时。

如何在页面上实现一个圆形的可点击区域?

 (1)纯 html 实现,使用 <area> 来给 <img> 图像标记热点区域的方式,<map> 标签用来定义一个客户端图像映射,<area> 
     标签用来定义图像映射中的区域,area 元素永远嵌套在 map 元素内部,我们可以将 area 区域设置为圆形,从而实现可点击
     的圆形区域。

 (2)纯 css 实现,使用 border-radius ,当 border-radius 的长度等于宽高相等的元素值的一半时,即可实现一个圆形的
     点击区域。

 (3)纯 js 实现,判断一个点在不在圆上的简单算法,通过监听文档的点击事件,获取每次点击时鼠标的位置,判断该位置是否在我
     们规定的圆形区域内。

详细资料可以参考: 《如何在页面上实现一个圆形的可点击区域?》 《HTML

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!