<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
border: 1px solid #ccc;
background-image: url(./1.jpg);
width: 500px;
height: 500px;
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 1920px 1080px;
}
</style>
</head>
<body>
<div style="position:relative">
<img id="clothes" class="clothes" src="./1.jpg" alt="" width="500">
</div>
<div class="box" id="box"></div>
<script>
function getImgNatural(img,callback){
var nWidth,nHeight
if(img.naturalWidth){
nWidth=img.naturalWidth
nHeight=img.naturalHeight
callback(nWidth,nHeight)
}else{
var image=new Image()
image.src=img.src
image.onload=function(){
callback(image.width,image.height)
}
}
// return [nWidth,nHeight]
}
function test(img,callback){
var image=new Image()
image.src=img.src
image.onload=function(){
callback(image.width,image.height)
image=null
}
}
function test2(img,callback){
return new Promise((resolve,reject)=>{
var image=new Image()
image.src=img.src
image.onload=function(){
resolve([image.width,image.height])
image=null
}
})
}
test2(img).then((res)=>{
console.log(res);
})
let img = document.getElementById('clothes')
img.onmousemove = (e) => {
const { top, left, bottom, right } = img.getBoundingClientRect()
let x = e.clientX, y = e.clientY
console.log(x, y);
let width = img.clientWidth
let height = img.clientHeight
let ab_x = (x - left) / width
let ab_y = (y - top) / height
console.log(ab_x, ab_y);
// let maxwidth = 1920;
// let maxheight = 1080;
// let maxwidth = test(img)
// let maxheight = test(img)
test(img,handle)
function handle(maxwidth,maxheight){
console.log(maxwidth,maxheight);
let res_x = ab_x*maxwidth
let res_y = ab_y*maxheight
if (res_x > maxwidth - 500) {
res_x = maxwidth - 500
} else if (res_x < 0) {
res_x = 0
}
if (res_y > maxheight - 500) {
res_y = maxheight - 500
} else if (res_y < 0) {
res_y = 0
}
console.log(`${res_x}px ${res_y}px`);
//获取在百分比的位置 边界00 11------
document.getElementById('box').style.backgroundPosition = `-${res_x}px -${res_y}px`
}
}
</script>
</body>
</html>