zoukankan      html  css  js  c++  java
  • 如何在页面上实现一个圆形可点击区域

    1.   map+area

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

    2.  border-radius(H5)

    1. <style>  
    2.  .circle{  
    3. /*圆设置*/
    4.      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.  }  
  • 相关阅读:
    PacificA协议小结
    raft协议小结
    python爬虫抓取图片
    composer 的使用和常用命令大全
    php批量同步数据
    VMware虚拟机的安装与配置
    国家和地区代码表
    js判断h5页面地址的打开方式(微信、pc、移动端)
    phpexcel图片获取
    python的文件操作及简单的用例
  • 原文地址:https://www.cnblogs.com/moneyss/p/6962341.html
Copyright © 2011-2022 走看看