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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
laravel入门知识点整理
2020/09/15 PHP
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python简单贪吃蛇开发
2019/01/28 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Opencv求取连通区域重心实例
2020/06/04 Python
用python进行视频剪辑
2020/11/02 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
酒店宣传语大全
2015/07/13 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
解决vue中provide inject的响应式监听
2022/04/19 Vue.js