浅谈三种方法实现一个圆形的可点击区域
来源:互联网 发布:mac下安装maven 编辑:程序博客网 时间:2024/06/08 07:56
方法一:
<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" 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!"); }
1 0
- 浅谈三种方法实现一个圆形的可点击区域
- Web前端面试指导(四十二):如何在页面上实现一个圆形的可点击区域?
- 如何在页面上实现一个圆形的可点击区域
- UITextField 点击非文本框区域使键盘消失的三种方法
- bootstrap的模态框锁定可点击区域
- 带有可点击区域的图像映射
- 圆形button设置点击区域为圆形
- 三种圆形进度条的实现
- HTML <area> 标签实现带有可点击区域的图像映射
- 监听按钮点击事件实现的三种方法
- 三种方法实现按钮的点击事件
- 实现按钮点击倒计时的三种方法
- 三种不同的方法实现按view点击事件
- 实现圆形头像的几种方法
- 一个功能的三种实现方法
- 圆形进度条的实现方法
- 浅谈Android - BitmapShade 并用BitmapShade 实现一个圆形图片
- 如何使图片的某个区域可点击
- 映射组成关系
- 【九度OJ】题目1434:今年暑假不AC 解题报告
- Spherical Gaussian approximation for Blinn-Phong, Phong and Fresnel
- gradle的配置信息详解
- 打印图形 蓝桥杯
- 浅谈三种方法实现一个圆形的可点击区域
- Android笔记(二):有序广播
- POJ题单及算法训练练习顺序
- iOS开发关于block和局部变量和全局变量
- Linux 打包与压缩
- Struts2基本概念
- 记录单词Oracle database concepts
- 安装PHP7的图形用户界面(GUI) 扩展
- BootStrap自定义popover,点击区域隐藏功能!