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程序设计有所帮助。
相关文章
json数据在ajax实现异步交互时起到了很重要的作用，他可以返回请求的数据，然后利用客户端的js进行解析，这一点体现出js的强大，本文介绍JS解析json数据并将json字符串转化为数组的实现方法，需要了解的朋友可以参考下2012-12-12
本篇文章主要是对js中判断用户输入的值是否为空的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JavaScript输入分钟、秒倒计时的代码实现，通过css和js代码展示了逻辑过程，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。2017-08-08
Bootstrap Table从服务器加载数据进行显示的实现方法
Bootstrap-Table是一个Boostrap的表格插件，能够将JSON数据直接显示在表格中。接下来通过本文给大家分享Bootstrap Table从服务器加载数据进行显示的实现方法，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏，对TypeScript感兴趣的同学，一定要看一下2021-04-04
这篇文章介绍了动态改变div的z-index属性的简单实例，有需要的朋友可以参考一下2013-08-08
这篇文章主要给大家介绍了关于es6中reduce的基本使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用es6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
本文主要介绍了V8实现字符串拼接，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了JavaScript实现九宫格移动拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本文给大家分享的是个人项目中需要的一个小功能，当时经过一番度娘才实现，现在从项目中拿出来，分享给大家，需要的小伙伴快来参考下吧。2015-04-04
最新评论