怎么能在页面上实现一个圆形可点击区域？
DW软件实现方法 视频：
2. border-radius（H5）
<style>
.circle{
/*圆设置*/
width:100px;
height:100px;
border-radius: 50%;
cursor: pointer;
/*文字设置*/
position: absolute;
left:50px;
top:50px;
line-height: 100px;
text-align: center;
color: white;
background-color:dimgray;
}
</style>
3. 纯js实现
求点在不在圆上的简单算法、获取鼠标坐标等等
两点之间的距离计算公式
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2) Math.pow(Y2-Y1,2)))
假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
document.onclick=function(e){
var r=50;//圆的半径
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
//计算鼠标点的位置与圆心的距离
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2) Math.pow(y2-y1,2)));
if(len<=50){
console.log("内")
}else{
console.log("外")
}
}
以上就是怎么能在页面上实现一个圆形可点击区域？的详细内容，更多请关注jquery中文网其它相关文章！
-->您可能感兴趣的文章：
怎么能在页面上实现一个圆形可点击区域？
IE7,IE8浏览器CSS实现正圆角效果代码
Illustrator快速制作出斜面浮雕效果的小图标教程
几何画板工具箱常用功能使用方法介绍
Illustrator矢量设计软件使用技巧经验分享
pptv多屏互动功能怎么使用
html5 Canvas实现画未闭合的路径及渐变色的填充方法
Illustrator实例入门网页按钮制作教程
高德地图 canvas画图结合实现一个小项目
svg path路径的作用：svg path在网页开发中的使用方法