(1)纯 html 实现,使用 <area> 来给 <img> 图像标记热点区域的方式,<map> 标签用来定义一个客户端图像映射,<area> 标签用来定义图像映射中的区域,area 元素永远嵌套在 map 元素内部,我们可以将 area 区域设置为圆形,从而实现可点击 的圆形区域。 (2)纯 css 实现,使用 border-radius ,当 border-radius 的长度等于宽高相等的元素值的一半时,即可实现一个圆形的 点击区域。 (3)纯 js 实现,判断一个点在不在圆上的简单算法,通过监听文档的点击事件,获取每次点击时鼠标的位置,判断该位置是否在我 们规定的圆形区域内。
详细资料可以参考: 《如何在页面上实现一个圆形的可点击区域?》 《HTML
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!