1.鼠标经过small,显示遮盖层和大图;离开时隐藏;
2.鼠标在盒子中移动时,遮盖层和鼠标一起移动;
3.遮盖层移动时,大图移动;
须注意点:
1.处理小图时:
鼠标在遮盖层的中间,所以遮盖层的左上角的坐标应该在鼠标在盒子中的位置,减去一半的遮盖层宽度、高度;
代码为:
鼠标在盒子中的位置
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
遮盖层的左上角位置
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
当遮盖层的左上角超出small的区域的时候,需要设置为固定坐标(0,0);
代码为:left = left<0? 0 : left;
top = top<0? 0 : top;
当遮盖层的右下角到达small右下角,要超出的时候,需要设置左上角为固定值(遮盖层能移动的最大x坐标,遮盖层能移动的最大Y坐标)。
代码为: left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
2.在处理大图时,需要计算大图的移动位置,此处有一个公式:
遮盖层移动的距离/遮盖层能移动的最大距离 = 大图移动的距离/大图能移动的最大距离。
所以在得到大图移动的距离时,代码如下:
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
在此例中,因为大图的初始定位在左上角,遮盖层右移时,大图应该左移。所以在计算时,大图的移动的数据应该为负值。
当进行到这个过程中,如果样式上面的一个小细节你没有注意到,那么效果也许会和你想象的不一样,遮盖层的这该部分不是大图显示的区域。问题出现在样式定义上(所有盒子均为正方形):
在定义small的时候有一个比例存在:
遮盖层的宽度 / big(说明大图显示区域的宽度) = 小图宽度/大图宽度。
此处我设置为:遮盖层宽度:50px big:300px
小图宽度:100px 大图宽度:600px
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding:0;
text-align: center;
}
#sell{
text-align: center;
}
#small{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: top;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
#big{
top:0px;
left:170px;
width: 300px;
height: 300px;
display: inline-block;
display: none;
overflow: hidden;
position: relative;
}
#move {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
top:0;
left:0;
background-color: rgba(50,50,50,0.5);
background-position: 0 0;
display: none;
}
#big img{
position: absolute;
left:0px;
top:0px;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="sell">
<div id="small">
<img src="./images/big.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./images/big.jpg" alt="">
</div>
</div>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
var divmove = document.getElementById("move");
small.onmouseover=function(e){
e = e||window.event;
console.log(e);
small.onmousemove = function(e){
e = e||window.event;
console.log(e);
// 小图形的处理
divmove.style.display = "block";
big.style.display = "block";
// 鼠标在盒子中的坐标
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
// move坐标显示在small中
left = left<0? 0 : left;
top = top<0? 0 : top;
left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
console.log(left+" "+top);
divmove.style.display = "block";
divmove.style.left = left+"px";
divmove.style.top = top+"px";
// 大图形处理
// move 移动的距离/move最大能移动的距离 = bigimg移动的距离/bigimg最大能移动的距离
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
big.children[0].style.left = -bigleft+"px";
big.children[0].style.top= -bigtop+"px";
}
}
small.onmouseout=function(e){
e = e||window.event;
divmove.style.display = "none";
big.style.display = "none";
small.onmousemove = function(e){
}
}
</script>
</body>
</html>
3.在鼠标进入或者滑出盒子时会出现闪烁,原因为onmouseover、onmouseout 会触发事件冒泡。处理的办法为换成:onmouseenter onmouseleave。不出现时间冒泡时功能一致,onmouseenter onmouseleave不触发事件冒泡。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding:0;
text-align: center;
}
#sell{
text-align: center;
}
#small{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: top;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
#big{
top:0px;
left:170px;
width: 300px;
height: 300px;
display: inline-block;
display: none;
overflow: hidden;
position: relative;
}
#move {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
top:0;
left:0;
background-color: rgba(50,50,50,0.5);
background-position: 0 0;
display: none;
}
#big img{
position: absolute;
left:0px;
top:0px;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="sell">
<div id="small">
<img src="./images/big.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./images/big.jpg" alt="">
</div>
</div>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
var divmove = document.getElementById("move");
small.onmouseenter=function(e){
e = e||window.event;
small.onmousemove = function(e){
e = e||window.event;
// 小图形的处理
divmove.style.display = "block";
big.style.display = "block";
// 鼠标在盒子中的坐标
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
// move坐标显示在small中
left = left<0? 0 : left;
top = top<0? 0 : top;
left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
divmove.style.display = "block";
divmove.style.left = left+"px";
divmove.style.top = top+"px";
// 大图形处理
// move 移动的距离/move最大能移动的距离 = bigimg移动的距离/bigimg最大能移动的距离
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
big.children[0].style.left = -bigleft+"px";
big.children[0].style.top= -bigtop+"px";
}
}
small.onmouseleave=function(e){
e = e||window.event;
divmove.style.display = "none";
big.style.display = "none";
small.onmousemove = function(e){
}
}
</script>
</body>
</html>