Web前端面试指导(四十二):如何在页面上实现一个圆形的可点击区域?
2016-10-13 19:05
1031 查看
题目点评
这道题目是比较开放的题目,答案显然是不只一个的,考察你的应变能力,要能拿出多几个解决方案,获取面试官的芳心。以下给大家讲解三种解决方案。解决方法
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.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("外") } }
相关文章推荐
- 如何在页面上实现一个圆形的可点击区域?
- 如何在页面上实现一个圆形的可点击区域
- Web前端面试指导(十七):一个满屏 品 字布局 如何设计?
- Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
- Web前端面试指导(三十四):如何实现浏览器内多个标签页之间的通信?
- Web前端面试指导(二十):JavaScript中如何翻转一个字符串?
- Web前端面试指导(二十九):Ajax 是什么? 如何创建一个Ajax?
- Web前端面试指导(二十二):用js实现千位分隔符,怎么实现?
- 如何实现返回上一个页面,就像点击浏览器的返回按钮一般
- 把页面分成左右两个,如何实现在左侧点击,链接一个页面到右边的页面
- Web前端面试指导(四十七):页面优化有哪些方法
- 把页面分成左右两个,如何实现在左侧点击,链接一个页面到右边的页面
- 如何用js实现,在一个页面有个输入文档框,然后点击查询按扭后,调用IE的查询功能在当前页面进行查询
- java web开发中,jsp使用了frameset框架,如何实现整个页面跳转,并且同一个表单中可以提交两个action
- 一个javaweb新手,eclipse如何配置tomcat,让纯前端页面在浏览器跑起来
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失
- Web前端面试指导(十九):CSS样式-如何清除元素浮动?
- 请问如何在Web页面中点击一个button之后,用jsp从数据库中读取数据显示到表格里
- 如何实现点击一个按钮后跳转的指定的链接页面
- Web前端面试指导(二十一):如何向数组中间插入或删除元素?