js放大鏡看來程式碼基本上能理解，但有一句程式碼測試過了，知道效果但不知道為什麼這麼寫？
圖片不能上傳，不知道什麼原因。那就上程式碼吧，做個這個功能的應該很熟。
<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";
}其中 x = small.offsetWidth - mask.offsetWidth這句程式碼沒看懂，兩個不應該都是定值麼，用alert測試small.offsetWidth - mask.offsetWidth是定值。測試x就是一個變值，功能來說x應該是個變數的。但 small.offsetWidth ， mask.offsetWidth不因該都是定值麼？
習慣沉默2017-05-19 10:17:24
//this.offsetParent.offsetLeft 父级的偏移量left
//mask.offsetWidth /2 自己的宽度除以二，中心
//event.clientY 在客户端的位置。
//event.clientY-this.offsetParent.offsetLeft 当前鼠标在当前父级的坐标点。
//event.clientY-this.offsetParent.offsetLeft - mask.offsetWidth /2 调整当前鼠标的位置为中心点
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2;
if(x < 0){
x = 0;//如果x小于0，就让盒子当做0处理，不去越界，如果x>
}else if(x > small.offsetWidth - mask.offsetWidth) {
x = small.offsetWidth - mask.offsetWidth;//盒子宽度 - mask宽度，代表就是右边越界，取一个边界值就可以了、
}所以，這個if(){}else if(){}就是用來做邊界控制的。前面是左邊界，後面是右邊界