图片固定可点击位置demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.picExrea {
/* min-width: 1200px; */
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-image: url(https://mail.10086.cn/images/img_bg.png);
position: relative;
}
.clickOk {
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div class="picExrea">
<div class="clickOk"></div>
</div>
<script>
let img = new Image();
let naturalHeight = 0; // 正常高度
let naturalWidth = 0; // 正常宽度
let oldPicX = 200; // 可点击左上角原始x坐标
let oldPicY = 100; // 可点击左上角原始y坐标
let oldPicW = 200; // 可点击区域原始宽度
let oldPicH = 200; // 可点击区域原始高度
let nowW = 0; // 当前图片展示宽度
let nowH = 0; // 当前图片展示高度
const getPicDom = ()=>{
/** 获取图片当前展示宽高 */
let picDom = document.getElementsByClassName("picExrea")[0];
let clickOk = document.getElementsByClassName("clickOk")[0];
nowW = picDom.offsetWidth;
nowH = picDom.offsetHeight;
/** 判断哪边被裁剪了 */
let isW = (nowW / naturalWidth) < (nowH / naturalHeight);
let nowPicX, nowPicY, picW, picH;
if(isW) { // 宽度被裁剪
nowPicX = (nowH / naturalHeight) * oldPicX;
nowPicY = (nowH / naturalHeight) * oldPicY;
picW = (nowH / naturalHeight) * oldPicW;
picH = (nowH / naturalHeight) * oldPicH;
} else { // 高度被裁剪了
nowPicX = (nowW / naturalWidth) * oldPicX;
nowPicY = (nowW / naturalWidth) * oldPicY;
picW = (nowW / naturalWidth) * oldPicW;
picH = (nowW / naturalWidth) * oldPicH;
}
clickOk.style.width = picW + "px";
clickOk.style.height = picH + "px";
clickOk.style.top = nowPicY + "px";
clickOk.style.left = nowPicX + "px";
}
img.src = "https://mail.10086.cn/images/img_bg.png";
img.onload = ()=>{
/** 获取图片原始宽高 */
naturalHeight = img.naturalHeight;
naturalWidth = img.naturalWidth;
getPicDom();
window.addEventListener('resize', getPicDom); // 可以将这里使用MutationObserver监听某一dom大小变化
}
</script>
</body>
</html>
QQ2024318-175250