H5热区实现-兼容ipad、PC浏览器、微信端浏览器、屏幕旋转

数据结构：
{

    "leftX": 6,

    "topY": 95,

    "rightX": 369,

    "bottomY": 353,

    "link": {

        "linkName": "Xxxx",

        "linkUrl":"www.baidu.com",

    }

}

解决方案：

使用a标签绝对定位，为了兼容各种情况，采用百分比布局。
代码：

<img src={data.backgroundImgUrl} />

data.map((item, index) => (

<a  className='hotareaLink' key={index} style={{"left":this.transformPx(item.leftX)+'%',"transform": "translateY("+(item.topY/(item.bottomY- item.topY))*100+"%)","width":this.transformPx(item.rightX- item.leftX)+'%',"paddingTop":((item.bottomY- item.topY)/750)*100+"%","zIndex":index }}  to={item.link.linkUrl}></a>  ))

                }

transformPx = (d)=>{

        return (d/750)*100

    }

背景：

绘制热区时以图片宽度为750 来计算leftX 、rightX，高度自适应

 {/* 为了兼容PC端浏览器打开热区、PC微信浏览器打开、移动端打开、移动端屏幕旋转使用百分比，宽度以750为基础计算百分比，由于拿不到图片真实高度，距离顶部使用transform(以自身为基础计算百分比)，height使用paddingTop(以宽度为基础计算比例） */}

padding-top:代替height，padding-top百分比是以宽度为基础计算