怎么能在页面上实现一个圆形可点击区域?
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("外")
}
}
以上就是怎么能在页面上实现一个圆形可点击区域?的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 怎么能在页面上实现一个圆形可点击区域?
本文地址: https://pptw.com/jishu/583444.html