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

本文介绍了三种不同的技术来创建圆形的交互元素:使用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("外")
    }
 }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值