如何在页面上实现一个圆形可点击区域

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:108 发布时间:2019-05-10
摘要:1.   map area DW软件实现方法    视频: http://www.chuanke.com/3885380-190205.html 2.  border-radius(H5) style    .circle{   /*圆设置*/      width:100px;        height:100px;         border-radius: 

1.   map area

DW软件实现方法    视频:http://www.chuanke.com/3885380-190205.html

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实现

求点在不在圆上的简单算法、获取鼠标坐标等等
两点之间的距离计算公式

 皇牌天下投注网 1

 

|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.  }  

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:如何在页面上实现一个圆形可点击区域

关键词:

上一篇:Mint-UI Picker 三级联动

下一篇:没有了

最火资讯