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

Posted 2020-09-27 Orange

三种解决方案： html标签、css实现、 纯js实现

方案一：

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

<img src="task6.jpg" width="1366" height="768" border="0" usemap="#Map" />  
<map name="Map" id="Map">  
 <area shape="circle" coords="100,100,50" href="https://www.baidu.com" target="_blank" />  
</map>  

方案二：

<style>  
 .disc{  
     width:100px;  
     height:100px;  
     background-color:dimgray;  
     border-radius: 50%;  
     cursor: pointer;  
     position: absolute;  
     left:50px;  
     top:50px;    
     line-height: 100px;  
     text-align: center;  
     color: white;  
 }  
</style>

<div class="disc">点击区域</div>  

方案三：

    <script>
        document.onclick = function(e){
            var r = 50;  //圆的半径
            var x1 = 100,  y1 = 100;  
            var 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("Inner");
            }else{
                console.log("Outer");
            }
        }
    </script>