淘宝京东专题页做法之HTML5 map 应用（2）

在第一节中讲了

map

的使用方法，但在项目做得过程中，我发现有一个问题，当浏览器窗口缩放的过程中，我们之前定义的

area

的锚点位置 发生了改变，由于

coords

属性值 写的是固定尺寸，不会自适应，所以我又找了网上的解决方案特此记录。

html:

<img src="images/02-2.jpg" alt="图片" usemap="#Mapslide">
<map name="Mapslide" id="Mapslide">
<area shape="rect" coords="470,0,767,148" href="https://www.taobao.com/" target="_blank" class="act" />
<area shape="rect" coords="818,0,1110,148" href="https://www.taobao.com/" target="_blank" class="act" />
<area shape="rect" coords="1148,0,1440,148" href="https://www.taobao.com/" target="_blank" class="act" />
</map>

js:
/*根据分辨率自适应热区坐标*/
function changeCoords(){
var width  = document.body.offsetWidth;
var height = document.body.offsetHeith;
if (1920 == width) return;
var percent = width/1920;
$(".act").each(function(){
var coords = $(this).attr("coords");

var arr = coords.split(",");
for(var i=0;i<arr.length;i++){

4000
arr[i] *= percent;
}
var str = arr.join(",");
$(this).attr("coords",str);
});
};
changeCoords();

通过以上 js 可以根据浏览器窗口的大小改变而动态计算 coords 的值，这样锚点就可以自适应，一直保持到你想要的位置啦~