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

最新推荐文章于 2021-05-11 09:17:05 发布

Goodbye_yesterday

最新推荐文章于 2021-05-11 09:17:05 发布

阅读量339

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/Goodbye_/article/details/112988908

版权

前端面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3种方式，html，css, js

1.html

客户器端图像映射

<img src="https://www.w3school.com.cn/i/eg_planets.jpg" alt="太阳" usemap="#Map">
    <map name="Map">
    <area shape="circle" coords="100,100,50" href="https://www.baidu.com" alt="百度">
    </map>

2.CSS

<style>
    .disc{
        width: 100px;
        height: 100px;
        background-color: #000;
        border-radius: 50%;
        cursor: pointer;
        color: white;
    }
</style>
<body>
    <div class="disc"></div>
</body>
</html>

3.js

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