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 动画基础教程
Dec 25 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
js模糊查询实例分享
Dec 26 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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注释和去除空格函数分享
2014/03/13 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP概率计算函数汇总
2015/09/13 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
给排水工程师岗位职责
2013/11/21 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
政府信息公开实施方案
2014/05/09 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB