2019-11-12 |

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

A
B
C
D
答案:

答案:css3、js、map 加 area

一.border-radius (css3)

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

二.通过事件坐标来实现(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("老婆,你让我好找啊,呜呜呜");
});

三.通过 map 加 area

<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>
解释:
html基础

发表评论

    评价:
    验证码: 点击我更换图片
    最新评论