您的位置：首页 > 其它

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

2017-07-12 14:09 471 查看

三种解决方案： 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航