这道题目是比较开放的题目,答案显然是不只一个的,考察你的应变能力,要能拿出多几个解决方案,获取面试官的芳心。以下给大家讲解三种解决方案。
解决方法
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("外") } }