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

最新推荐文章于 2024-09-01 10:00:00 发布

灵灵7

最新推荐文章于 2024-09-01 10:00:00 发布

阅读量789

点赞数

本文介绍了三种不同的技术来创建圆形的交互元素：使用HTML的map和area标签、HTML5的border-radius属性以及纯JavaScript实现。每种方法都有其独特之处，适合不同的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这道题目是比较开放的题目，答案显然是不只一个的，考察你的应变能力，要能拿出多几个解决方案，获取面试官的芳心。以下给大家讲解三种解决方案。

解决方法

1. map+area

<img src="t.jpg" width="1366" height="768" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="circle" coords="821,289,68" href="www.baidu.com" target="_blank" />
</map>

2. border-radius（H5）


<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Hidden info panel</title>

  <style>

.disc{
  width:100px;
  height:100px;
  background-color:mediumvioletred;
  border-radius:50%;
  cursor: pointer;
  position: absolute;
  left:50px;
  top:50px;
  text-align: center;
  color: white;
}

.disc p{
  margin:0;
  margin-top:10px
}
  </style>
</head>
  <div class="disc"><p>好好学习</p><p>good good study</p></div>
</body>
</html>

3. 纯js实现

需要求一个点在不在圆上简单算法、获取鼠标坐标等等
两点之间的距离计算公式
上面公式对于JavaScript代码如下：
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
Math.abs() 求绝对值
Math.pow() 底数,指数
Math.sqrt() 求平方根

示例：

假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
document.onclick=function(e){
    var r=50;//圆的半径
    var x1=100,y1=100,x2= e.clientX;y2= e.clientY;//计算鼠标点的位置与圆心的距离
    var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
    if(len<=50){
        console.log("内")
    }
    else{
        console.log("外")
    }
 }