极客观点
项目管理
HarmonyOS
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
border: 2px solid #eee;
width: 400px;
height: 400px;
box-shadow: 5px 10px 10px 3px #ccc;
position: relative;
float: left;
}
.box {
width: 180px;
height: 180px;
background: yellow;
opacity: 0.4;
/*display: none;*/
position: absolute;
}
.scale {
width: 450px;
height: 450px;
border: 2px solid #b3b3b3;
position: relative;
display: inline-block;
overflow: hidden;
}
.big-image{
/*overflow: hidden;*/
position: absolute;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4265027237,2654660306&fm=27&gp=0.jpg" width="100%" height="100%">
<div class="box"></div>
</div>
<div class="scale">
<img class="big-image" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4265027237,2654660306&fm=27&gp=0.jpg" alt="" width="100%" height="100%">
</div>
<script>
let container = document.querySelector('.container');
let box = document.querySelector('.box');
let scale = document.querySelector('.scale');
let bigImage = document.querySelector('.big-image'); // 大图
let percent = scale.offsetHeight / box.offsetHeight; // 大图：小图比例
bigImage.width = bigImage.offsetWidth * percent;
bigImage.height = bigImage.offsetHeight * percent;
container.onmouseover = () => {
box.style.display = 'block';
container.onmousemove = e => {
let x = e.clientX;
let y = e.clientY;
box.style.left = x - box.offsetWidth / 2 + 'px';
box.style.top = y - box.offsetHeight / 2 + 'px';
if(box.offsetLeft <= 0) {
box.style.left = 0;
}
if(box.offsetTop <= 0) {
box.style.top = 0;
}
if (container.offsetWidth - box.offsetLeft < box.offsetWidth) {
box.style.left = container.offsetWidth - box.offsetWidth + 'px';
}
if (container.offsetHeight - box.offsetTop < box.offsetHeight) {
box.style.top = container.offsetHeight - box.offsetHeight + 'px';
}
bigImage.style.left = -box.offsetLeft * percent + 'px';
bigImage.style.top = -box.offsetTop * percent + 'px';
; }
};
container.onmouseout = () => {
box.style.display = 'none';
};
</script>
</body>
</html>源码贴上可以直接运行，大神帮忙看看，我眼花了真是~~
html5
你需要把小框的中心对应到大框的中心