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 >
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。