目录
一、效果展示
二、案例分析
此案例可以分为以下几步实现:
1.当鼠标经过 左侧小img时 就显示 黄色mask遮挡层 和 右侧大盒子,否则隐藏;
2.鼠标移动的时候,让 黄色mask遮挡层 的也跟着鼠标移动;
3.黄色mask移动,右侧的图片也随之移动
(这里右侧的放大效果,是通过放入一张比父盒子大的图,overflow:hidden 来实现的)
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>放大图片移动案例</title>
<style>
*{
margin: 0;
padding-top: 0;
}
.preview-img{
top: 50px;
left: 50px;
width: 300px;
height: 300px;
margin: 100px;
}
.imgS{
position: absolute;
width: 300px;
height: 300px;
}
.mask{
display: none;
position: absolute;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background-color:yellow;
opacity: 0.5;
}
.big{
display: none;
position: absolute;
left:410px;
top: 100;
width: 500px;
height: 500px;
background-color: violet;
overflow: hidden;
}
.imgB{
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="preview-img">
<img src="../Js/images/7.11-1.jpg" alt="" class="imgS">
<div class="mask"></div>
<div class="big">
<img src="../Js/images/7.11-1.jpg" alt="" class="imgB">
</div>
</div>
<script>
window.addEventListener('load',function(){
var pre_img = document.querySelector('.preview-img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var img = document.querySelector('.imgB');
//1. 当鼠标经过 pre_img 就显示和隐藏mask 遮挡层 和 big大盒子
pre_img.addEventListener('mouseover',function(){
mask.style.display = 'block';
big.style.display = 'block';
})
pre_img.addEventListener('mouseout',function(){
mask.style.display = 'none';
big.style.display = 'none';
})
//2. 鼠标移动的时候,让黄色的盒子跟着鼠标走
pre_img.addEventListener('mousemove',function(e){
//鼠标在盒子中的坐标
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
//改变黄色盒子的left 和 top 让鼠标在mask的中间,所以要减去它本身的一半
//因为要进行限制,所以要进行比较,但有px无法比较,所以先给它一个定义
var maskX = x -mask. offsetWidth /2 + 100 ;
var maskY = y -mask.offsetHeight /2 + 100 ;
if(maskX < 100){
maskX = 100 ;
}
else if(maskX > pre_img.offsetWidth - mask.offsetWidth +100){
maskX = pre_img.offsetWidth - mask.offsetWidth +100;
}
if(maskY < 100){
maskY = 100 ;
}
else if(maskY > pre_img.offsetHeight - mask.offsetHeight +100){
maskY = pre_img.offsetHeight - mask.offsetHeight +100;
}
mask.style.left = maskX +'px';
mask.style.top = maskY +'px';
//大图片的移动距离 = 遮挡层移动距离 *大图片最大移动距离 /遮挡层最大移动距离
var maskMax = pre_img.offsetHeight - mask.offsetHeight;//最大移动距离
var imgMax = img.offsetWidth - big.offsetWidth;
img.style.left = -(maskX -100) * imgMax /maskMax + 'px';
img.style.top = -(maskY -100) * imgMax /maskMax + 'px';
})
})
</script>
</body>
</html>
代码注释:
1.此案例综合使用了 html、css、js来实现,主要练习的知识点是
event.pageX | 返回鼠标指针的位置,相对于文档的左边缘 |
event.pageY | 返回鼠标指针的位置,相对于文档的上边缘 |
offsetWidth | 返回该元素的像素宽度(包括内边距、边框),是一个整数,单位是像素 px。只读属性。 |
offsetHeight | 返回该元素的像素高度(包括内边距、边框),是一个整数,单位是像素 px。只读属性。 |
offsetLeft | 元素相对于 offsetParent 节点左边界的偏移像素值(包括内外边距、边框、滚动条),返回一个整数,表示该元素的左侧偏移量,单位是像素 px。只读属性。 |
offsetTop | 返回当前元素相对于 offsetParent 节点顶部边界的偏移像素值(包括内外边距、边框、滚动条),返回一个整数,表示该元素的顶部侧偏移量,单位是像素 px。只读属性。 |
( offsetParent 元素是一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的元素。)
2.控制盒子的隐藏与出现
mouseover 时:mask.style.display = 'block';
mouseout 时:mask.style.display = 'none';
3.黄色mask只能在它的父盒子范围内移动,所以要判断它的 left 和 top 值的大小
maskX = x -mask. offsetWidth /2 + 100 ; 这里 maskX 是 mask 对于页面左部的距离,‘-mask.offsetWidth/2’c的原因是,让鼠标在mask中间,要减去 mask 自身的宽度的一半,这里自己画一画,比较一下就能清楚。
(代码中的100px,是因为我在css中规定了一个外边距为100px,如果您未规定则无需加)
4.大图片的移动距离 = 遮挡层移动距离 *大图片最大移动距离 /遮挡层最大移动距离
这个关系十分重要,是根据等比表达式推理出来的,