题目点评
这道题目是比较开放的题目,答案显然是不只一个的,考察你的应变能力,要能拿出多几个解决方案,获取面试官的芳心。以下给大家讲解三种解决方案。
解决方法
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>
使用Dreamweaver制作热点会变得非常的容易,最终会形成上面的代码,具体的操作,可以参考视频,http://www.chuanke.com/3885380-190205.html。
2. border-radius(H5)<style> .disc{ width:100px; height:100px; background-color:dimgray; border-radius: 50%; cursor: pointer; position: absolute; left:50px; top:50px; line-height: 100px; text-align: center; color: white; }</style><div class="disc">智学无忧</div>
运行效果
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.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("外") } }