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 相关文章推荐
JavaScript 继承详解(一)
Jul 13 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JS倒计时代码汇总
Nov 25 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 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的分页功能
2007/03/21 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
javascript 单例模式详解及简单实例
2017/02/14 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python实现实时监控文件的方法
2016/08/26 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
安装Python的教程-Windows
2017/07/22 Python
Python中join函数简单代码示例
2018/01/09 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
详解Python time库的使用
2019/10/10 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
超级搞笑检讨书
2014/01/15 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
美国留学经济担保书
2014/05/20 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
二婚主持词
2015/06/30 职场文书