测试2

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

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

 

 

|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.  }  
内容来源于网络如有侵权请私信删除
标签： HTML HTML5
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

云知梦-HTML5网页标签
4608 0元 限免
HTML5网页标签
3947 0元 限免