html的热区可以自动缩放,科技常识：html中map area 热区自适应的原生js实现方案...

今天小编跟大家讲解下有关html中map area 热区自适应的原生js实现方案 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html中map area 热区自适应的原生js实现方案 的相关资料，希望小伙伴们看了有所帮助。

在做自适应网页的时候 如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化 但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现：MAP中每个area的坐标也随页面等比例的变化效果。

map area 热区自适应的实现代码

html:

img{

display:block;max-width:1920;width: 100%;border: 0;

}

js:

var initwidth=null,//初始图片宽度

area=document.getElementsByTagName('area'),

initarea=null;//初始数据保存

function init(){//初始化

initwidth=1920;

initarea=new Array(area.length-1);

for(var i=0;i

initarea[i]=area[i].getAttribute("coords");

}

}

function setCoords(){//根据分辨率自适应热区坐标

var width=document.body.offsetWidth,

percent=width/initwidth;

for(var i=0;i

var coords=initarea[i],

arr=coords.split(",");

for(var j=0;j

arr[j] *= percent;

}

area[i].setAttribute("coords",arr.join(","));

}

}

//使用

init();

window.onresize = function () {

setCoords();

}

大家在实际开发 请参照代码根据直接的需求改进。如果html页面中存在多个图片需要area,请自行封装实现！

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。