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 Distilled 基础知识与函数
Apr 07 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JsDom 编程小结
Aug 09 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
js实现简单的倒计时
2021/01/28 Javascript
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python os库常用操作代码汇总
2020/11/03 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
python数据抓取3种方法总结
2021/02/07 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
罗技美国官网:Logitech美国
2020/01/22 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
商场中秋节广播稿
2014/01/17 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
2016年会开场白台词
2015/06/01 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
python简单验证码识别的实现过程
2021/06/20 Python