浅谈三种方法实现一个圆形的可点击区域
2017-02-28 16:10
351 查看
方法一:
<img>通过usemap映射到<map>的circle形<area>。
方法二:
设置div的border-radius:50%。
方法三:
JS实现,获取鼠标点击位置坐标,判断其到圆点的距离是否不大于圆的半径,来判断点击位置是否在圆内。
<img>通过usemap映射到<map>的circle形<area>。
<img src="images/lanlvseImg.png" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="100,100,50" href="http://www.baidu.com" target="_blank"/> </map>
方法二:
设置div的border-radius:50%。
<div id="circle"></div> #circle{ background:red; width:100px; height:100px; border-radius:50%; }
方法三:
JS实现,获取鼠标点击位置坐标,判断其到圆点的距离是否不大于圆的半径,来判断点击位置是否在圆内。
document.onclick = function(e) { var r = 50; var x1 = 100; var y1 = 100; var x2= e.clientX; var y2= e.clientY; var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))); if (distance <= 50) alert("Yes!"); }
相关文章推荐
- 如何在页面上实现一个圆形的可点击区域?
- JS+HTML实现的圆形可点击区域示例【3种方法】
- 如何在页面上实现一个圆形的可点击区域
- Web前端面试指导(四十二):如何在页面上实现一个圆形的可点击区域?
- JS实现点击颜色块切换指定区域背景颜色的方法
- JS实现点击按钮自动增加一个单元格的方法
- javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
- 三种方法实现从“一个(组)查询过程中返回两个表的查询结果”
- Oracle ADF 一个页面实现 维护区域Form和查看区域Table 方法
- jQuery实现点击按钮弹出一个div,点击其他区域关闭该div
- javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
- UIWebView中视频点击链接直接全屏播放而不是点击一个播放按钮的实现方法
- 绘制在某个矩形区域内字符串自动多行换行的一个方法(c)语言实现
- jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
- Android开发-三种方法实现点击事件
- JS实现在线统计一个页面内鼠标点击次数的方法
- 一个功能的三种实现方法
- UITextField 点击非文本框区域使键盘消失的三种方法
- python实现每次处理一个字符的三种方法
- (三十一)工具方法:获得应用程序包名/安装apk/如何获得当前栈顶的Activity/android如何实现点击一个按钮进入指定网页