JS+HTML实现的圆形可点击区域示例【3种方法】


Posted in Javascript onAugust 01, 2018

本文实例讲述了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.3water.com/code/WebCodeRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 #Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 #Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 #Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 #Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 #Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 #Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 #Javascript
You might like
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
女性时尚网购:Chic Me
2019/07/30 全球购物
自强自立美德少年事迹材料
2014/08/16 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python