如何在页面上实现一个圆形的可点击区域?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

茶什i 2019-11-18 13:11:46 1131

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

key页面
分享到
取消 提交回答
全部回答(1)
  • 茶什i
    2019-11-18 13:12:35

    css3,js,map加区域

    一。边界半径(css3)

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

    二。通过事件坐标来实现(js)

    也就是通过js来进行一个区域判断,且靴子简介地的形成可点区域,以下称为主要的js测试代码:

    //获取目标元素
    var box =  document。getElementById( “ box ”);
    
    //对目标元素目标的圆形区域进行一个点击事件绑定
    功能 bindClickOnCircleArea(目标,回调){
       target。onclick  =  函数( e){
        e = e ||  窗口。事件 ;
    
        // targetcenter点的坐标
        var x1 =  100 ;
        var y1 =  100 ;
    
        //事件源坐标
        var x2 =  e。offsetX ;
        var y2 =  e。offsetY ;
    
        //验证是否在圆形点击区,在的话就执行回调或
        //计算事件触发点与目标中心的位置
        var len =  Math。ABS(数学。 SQRT(数学。 POW(X2 - X1, 2) +  数学。 POW(Y2 - Y1, 2)));
        //通过国会进行校正
        if(len <=  100){
           callback();
        } else {
           alert(“死鬼,跑哪去啊,你老婆我是黄皮肤还是白皮肤都分不清了吗”);
        }
      };
    }
    
    //执行
    bindClickOnCircleArea(框,函数(){
       alert( “老婆,你让我好找啊,呜呜呜”);
    });
    
    

    三。通过地图加面积

    < img  src = “ ../imgs/test.jpg ”  width = “ 200 ”  border = “ 0 ”  usemap = “ #Map ” />
    < 地图 名称 = “地图”  id = “地图” >
      < 区域
        形状 = “圆”
        坐标 = “ 100,100,100 ”
         href = “ http://www.baidu.com ”
         target = “ _blank ”
      />
    </ map >
    
    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

相似问题
最新问题