您的位置: 首页  >  文章  >  如何在页面上实现一个圆形的可点击区域

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

分类: 文章 • 2023-09-15 23:46:56

一.通过map加area

首先先给出一个小demo（demo1）吧：

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="circle" coords="100,100,100" href="http://www.baidu.com" target="_blank" />
</map>

其中的效果是这样的：
如何在页面上实现一个圆形的可点击区域
就是当你点击图片中所标记的圆形区域，会开启一个新的窗口并加载百度页面，同时图片会显示出轮廓。

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>通过map+area</title>
  <link rel="stylesheet" href="../css/index3.css">
</head>

<body>
  <div id="box">
    <div>
      <h2>test1:</h2>
      <img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="circle" coords="100,100,100" href="http://www.baidu.com" target="_blank" />
      </map>
    </div>
    <br>
    <div>
      <h2>test2</h2>
      <!-- 对整个小说项赋予链接 -->
      <a class="bookItem" href="https://read.qidian.com/chapter/XOn-GdKVmQjywypLIF-xfQ2/rTEHu3PW9WiaGfXRMrUjdw2" target="_blank">
        <!-- 单独给封面赋予点击区域 -->
        <img width="90" height="120px" src="../imgs/novel.jpg" class="book-cover" alt="绝对虚构" usemap="#bookCover">
        <map name="bookCover" id="bookCover">
          <area shape="rect" coords="0, 0, 90, 120" href="https://book.qidian.com/info/1013049039#Catalog" alt="绝对虚构"
            target="_blank">
        </map>
        <div class="bookInfo">
          <!-- 给小说名赋予点击区域 -->
          <h4 class="bookTitle">
            <area class="bookTitleArea" href="https://book.qidian.com/info/1013049039#Catalog" target="_blank">
            绝对领域
          </h4>
          <p class="bookDetail">第十章 欢迎来到我的世界</p>
        </div>
      </a>
    </div>
    <div>
      <h2>test3</h2>
      <!-- 对整个小说项赋予链接 -->
      <a class="bookItem" href="https://read.qidian.com/chapter/XOn-GdKVmQjywypLIF-xfQ2/rTEHu3PW9WiaGfXRMrUjdw2" target="_blank">
        <!-- 单独给封面赋予点击区域 -->
        <img width="90" height="120px" src="../imgs/novel.jpg" class="book-cover" alt="绝对虚构" usemap="#bookCover">
        <map name="bookCover" id="bookCover">
          <area shape="rect" coords="0, 0, 90, 120" href="https://book.qidian.com/info/1013049039#Catalog" alt="绝对虚构"
            target="_blank">
        </map>
        <div class="bookInfo">
          <!-- 给小说名赋予点击区域 -->
          <h4 class="bookTitle">
            <!-- 用透明图片覆盖小说名，并绑定area -->
            <img class="bookTitleArea" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
              usemap="#mapTitle">
            绝对领域
          </h4>
          <map name="mapTitle" id="mapTitle">
            <area shape="rect" coords="0, 0, 150, 22" href="https://book.qidian.com/info/1013049039#Catalog" target="_blank">
          </map>
          <p class="bookDetail">第十章 欢迎来到我的世界</p>
        </div>
      </a>
    </div>
  </div>
</body>

</html>

二.border-radius (css3)

对于圆形，最直接的方法想到的就是css3的圆角属性，这个属性可以将html元素的形状设置为圆形，这之后你想对该圆形区域设置什么事件就设置什么事件(当然包括点击)。（这里就不做具体的test了）

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

三.通过事件坐标来实现（js）

也就是通过js来进行一个区域判断，进而简介地的形成可点区域，以下给出主要的js测试代码：

// 获取目标元素
var box = document.getElementById('box');
 
// 对目标元素target的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function (e) {
    e = e || window.event;
 
    // target中心点的坐标
    var x1 = 100;
    var y1 = 100;
 
    // 事件源坐标
    var x2 = e.offsetX;
    var y2 = e.offsetY;
 
    // 校验是否在圆形点击区，在的话就执行callback回调
    // 计算事件触发点与target中心的位置
    var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
    // 通过半径进行校验
    if (len <= 100) {
      callback();
    } else {
      alert('死鬼，跑哪去啊，你老婆我是黄皮肤还是白皮肤都分不清了吗');
    }
  }
}
 
// 执行
bindClickOnCircleArea(box, function () {
  alert('老婆，你让我好找啊，呜呜呜');
});

看看效果图：

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

1.area是干什么的？

这里出现了两个HTML标签，一个是<area>还有一个是<map>，这些都是从很早就支持的HTML标签，所以不必担心兼容性问题。其中就闭合特性来看，<area>类似<img>，是无法有子元素或其他子内容的。

这里出现了几个属性：

  • shape
    shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形poly。
  • coords
    coords表示点击热点区域形状的坐标。坐标点0,0表示图片的左上角。其中矩形rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。例如，coords="20,20,80,80"生成的就是一个左上角坐标20,20宽高都是60px的矩形区域。圆形circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。多边形poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域。
  • href
    href和<a>元素的href是一样的东西，直接跳转地址，或者锚点等。也同样支持target属性和rel属性。也就是说<area>可以看成是半个<a>元素。
  • alt
    alt同<img>元素的alt，表示热点区域图片的描述信息。

如果<area>要想和图片热点关联，祖先元素<map>是不可缺少的，但是不一定非得直接父子关系。<map>和<area>之间再嵌套个<div>什么的功能也是正常的。

另外值得注意的是，area在被点击后会呈现outline，并且对area元素添加的css样式是没有任何效果的。

更详细介绍：https://blog.csdn.net/yaodebian/article/details/84778425

相关推荐