怎么能在页面上实现一个圆形可点击区域？-

1.?map+areaDW软件实现办法??视频：http:www.chuanke.com3885380-190205.html2.?border-radius（H5）<style>???.circle{??*圆设定*???? 1. map+area

DW软件实现办法 视频：

2. border-radius（H5）

1. <style>

2. .circle{

3. /*圆设定*/

4. width:100px;

5. height:100px;

6. border-radius: 50%;

7. cursor: pointer;

8. /*文字设定*/

9. position: absolute;

10. left:50px;

11. top:50px;

12. line-height: 100px;

13. text-align: center;

14. color: white;

15. background-color:dimgray;

16. }

17. style>

3. 纯js实现

求点在不在圆上的简略算法、猎取鼠标坐标等等
两点之间的距离盘算公式

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))

假如圆心为（100,100）,半径为50，在圆内点击弹出响应的信息，在圆外显示不在圆内的信息

1. document.onclick=function(e){

2. var r=50;//圆的半径

3. var x1=100,y1=100,x2= e.clientX;y2= e.clientY;

4. //盘算鼠标点的位置与圆心的距离

5. var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));

6. if(len<=50){

7. console.log("内")

8. }else{

9. console.log("外")

10. }

11. }

以上就是怎么能在页面上实现一个圆形可点击区域？的细致内容，更多请关注 百分百源码网 其它相干文章！