Solo  当前访客:0 开始使用

yfd🌕

用心工作,用爱生活。
浏览数: 17976    文章总数: 188   

html MAp coords 自适应热点图片宽度定位

业余结了一个小单子,html的作业,但是需要用DW做热点图,电脑也没有那玩意,就用淘宝热点图做了。后来发现图片比我屏幕还宽,body出现了滚动轴,如果改成百分比,热点图就错位了。于是就用js控制了。

图片加载前获取图片的原始宽度,这个时候,算出视窗宽度与图片宽度的比例Cp。

用dom查询area节点,获取coord属性。

每个属性乘上CP比例。

再setAttribute就好了。

代码:注意这列将图片宽度设置为100%!important。

   //全图状态下定位
var defaultMaps = [
    [585,170,787,239],
    [212,172,351,238],
    [1031,174,1230,245],
    [798,173,1026,244],
    [1238,172,1426,242],
    [1439,173,1635,241]

];
var areas = document.querySelectorAll('area');
for (var m = 0; m < areas.length; m++) {
    areas[m]
}
console.log(areas[0].coords);
console.log(areas.length);
// 图片地址
var img_url = '关于.png'

// 创建对象
var img = new Image()

// 改变图片的src
img.src = img_url

// 加载完成执行
img.onload = function(){
    // 打印
    var cuWidth =  document.body.clientWidth ;
    var cp = cuWidth / img.width ;
    console.log("cp:"+cp);
   console.log( document.body.clientWidth );
   for (var i = 0; i < defaultMaps.length; i++) {
      for (var n = 0; n < defaultMaps[i].length; n++) {
        console.log(defaultMaps[i][n]);
        defaultMaps[i][n] = defaultMaps[i][n] * cp;
        console.log(defaultMaps[i][n]);

      }
      areas[i].setAttribute('coords',defaultMaps[i]);
   }

};

null


标题:html MAp coords 自适应热点图片宽度定位
作者:yf_d
地址:看看我的CSDN

公告

今日诗词
微信:tel322ecdb2d