JS-Lupe scheint den Code grundsätzlich zu verstehen, aber es gibt einen Code, den ich getestet habe, und ich kenne den Effekt, aber ich weiß nicht, warum er so geschrieben ist?
Das Bild kann nicht hochgeladen werden, ich weiß nicht warum. Dann kommen wir zum Code. Jeder, der diese Funktion erstellt, sollte damit vertraut sein.
<style>
* {margin: 0;padding: 0;}
img {
vertical-align: top;
}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p class="box" id="fdj">
<!--小盒子-->
<p class="small">
<img src="images/001.jpg" alt=""/>
<p class="mask"></p>
</p>
<p class="big">
<img src="images/0001.jpg" alt=""/>
</p>
</p>
</body>
</html>
<script>
var fdj = document.getElementById("fdj"); // 获得最大的盒子
var small = fdj.children[0]; // 获得small 小图片 350盒子
var big = fdj.children[1]; // 获得 大图片 800 盒子
var mask = small.children[1]; // 小的黄色盒子
var bigImage = big.children[0]; // 大盒子里面的图片
small.onmouseover = function() { // 鼠标经过显示出他们
mask.style.display = "block";
big.style.display = "block";
};
small.onmouseout = function() {
mask.style.display = "none";
big.style.display = "none";
}
// 鼠标在small 内移动
var x = 0;
var y = 0;
small.onmousemove = function(event) {
var event = event || window.event;
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;// 再某个盒子内的坐标
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;
if(x < 0)
{
x = 0;
}
else if(x > small.offsetWidth - mask.offsetWidth)
{
**x = small.offsetWidth - mask.offsetWidth;**
}
if(y<0)
{
y = 0;
}
else if(y > small.offsetHeight - mask.offsetHeight)
{
y = small.offsetHeight - mask.offsetHeight;
}
alert(x);
mask.style.left = x + "px";
mask.style.top = y + "px";
/*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 4个馒头
问 夫子今天吃了 3个馒头 娇子应该吃几个？ */
/*计算出他们的倍数 4 / 2 2倍
3 * 2 == 6个 */
/* 大图盒子 / 小图盒子 倍数
我们 再小图移动的距离 * 倍数 == 大图的位置*/
bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px";
bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px";
}Darunter x = small.offsetWidth - mask.offsetWidth, ich verstehe diesen Code nicht. Sollten beide Werte nicht fest sein, um small.offsetWidth - mask.offsetWidth zu testen? Testen: x ist ein variabler Wert. Funktionell sollte x eine Variable sein. Aber sollten small.offsetWidth und mask.offsetWidth nicht feste Werte sein?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
所以，这个if(){}else if(){}就是用来做边界控制的。前面是左边界，后面是右边界