业务需求:点击图片热区跳转到不同的链接地址,同时要自适应窗口尺寸的变化。
问题:热区坐标点不会随着窗口调整变化
解决思路:获取初始的坐标点与图片宽高的比例,然后用比例乘以调整后的窗口宽高,就获得了新的坐标点
根据初始坐标计算新坐标:
function adjustPosition(position) {
// 获取宽高
var pageWidth = document.body.clientWidth;
var pageHeight = document.body.clientHeight;
// 图片原始尺寸
var imageWidth = 1423;
var imageHeigth = 1077;
var each = position.split(",");
for (var i = 0; i < each.length; i++) {
if(i%2==0){
// 新的y轴坐标
each[i] = Math.round(parseInt(each[i]) * pageHeight / imageHeigth).toString();
}else{
// 新的x轴坐标
each[i] = Math.round(parseInt(