JS+HTML实现的圆形可点击区域示例【3种方法】
更新时间：2018年08月01日 09:43:54 作者：筱葭
这篇文章主要介绍了JS+HTML实现的圆形可点击区域,结合实例形式分析了javascript结合HTML元素属性实现一个圆形的可点击区域相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS+HTML实现的圆形可点击区域。分享给大家供大家参考，具体如下：
方法一：
<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" rel="external nofollow" 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!");
}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
layer.open属性详解及layer.open弹出框使用post方法举例
这篇文章主要给大家介绍了关于layer.open属性详解及layer.open弹出框使用post方法的相关资料,最近接触到layer弹窗,感觉弹窗功能异常强大,真的很方便,所以记录下来,需要的朋友可以参考下2023-12-12
在JavaScript中，内存泄漏通常是由于变量、对象、闭包、事件监听器等长期存在而没有被释放引起的。本文就来和大家总结一下常见的几种情况以及解决方法吧2023-05-05
这篇文章主要介绍了js判断浏览器的环境（pc端，移动端，还是微信浏览器），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01![用javascript修复浏览器中头痛问题的方法整理篇[译]](//img.jbzj.com/images/xgimg/bcimg3.png)
用javascript修复浏览器中头痛问题的方法整理篇[译]
我们提倡无论何时都尽可能地使用CSS,这样我们更容易取得成功.现在浏览器对CSS的支持已经非常好,肯定足以让你用来控制你的网页布局与排版.但,即使如此,还是有某些页面元素会在不同的浏览器下表现也不一样.2008-11-11
这篇文章主要为大家详细介绍了js canvas实现二维码和图片合成的海报，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2018-01-01
这篇文章主要为大家详细介绍了如何利用Three.js中的BufferGeometry绘制酷炫的三角形，文中的示例代码讲解详细，感兴趣的可以尝试一下2022-12-12
for循环对大家来说都不陌生，下面这篇文章主要给大家介绍了关于如何在js代码中消灭for循环的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
解决微信小程序调用moveToLocation失效问题【超简单】
这篇文章主要介绍了解决微信小程序调用moveToLocation失效问题，解决方法超级简单,需要的朋友可以参考下2019-04-04
![用javascript修复浏览器中头痛问题的方法整理篇[译]](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论