javascript - js放大镜的一个小问题。
本文介绍了javascript - js放大镜的一个小问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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>
<div class="box" id="fdj">
<!--小盒子-->
<div class="small">
<img src="images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="images/0001.jpg" alt=""/>
</div>
</div>
</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不因该都是定值么？
解决方案
//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(){}就是用来做边界控制的。前面是左边界，后面是右边界
这篇关于javascript - js放大镜的一个小问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
