先看效果图:(为了减少体积,压缩了画面质量,也可以参考淘宝,天猫之类的产品详情展示页的放大镜效果)
整体思路
1、整个结构分为 小图(左边),大图(右边)两部分。为了方便计算,大图的宽高是小图的 2 倍。
2、小图有个遮罩 mask 部分,大图的区域是这个 mask 宽高的 2 倍。
整个效果就是:mask 在哪里,大图就展示哪里。
3、mask 和大图的图片,都要能任意移动,所以它们都是绝对定位的。
4、mask 要跟随鼠标,因此要获取鼠标在小图中的坐标。坐标的获取,可以参考我这篇文章 100%经典文章:JS如何获取鼠标在一个标签中的坐标
mask 要跟随鼠标,但是不能超出 小图的范围。所以,要判断 mask 的坐标范围 x,y 的值。
5、大图的位置移动,是mask移动左边的反向*2 。
HTML和CSS
<div class="box" id="box">
<div class="small" id="small">
<img src="../images/fdj-s.jpg" alt="">
<!-- mask -->
<div class="fdj_mask" id="mask"></div>
<!-- mask end -->
</div>
<div class="big" id="big">
<img src="../images/fdj.jpg" alt="">
</div>
</div>
*{
margin: 0;
padding: 0;
}
ul,li,ol{
list-style: none;
}
.box{
width: 500px;
height: 500px;
margin-left: 50px;
margin-top: 50px;
position: relative;
}
/*------ 小图的样式----- */
.small,
.small img{
width: 500px;
height: 500px;
}
/* 小图框架相对定位 */
.small{
position: relative;
}
/* 小图遮罩区绝对定位,方便随时移动位置
默认透明度为 0
*/
.fdj_mask{
width: 200px;
height: 200px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
/* 当鼠标在小图上的时候,
遮罩区透明度为 1 */
.small:hover .fdj_mask{
opacity: 1;
}
/*------ 大图的样式----- */
/* 大图绝对定位,默认隐藏
宽高为小图遮罩区的 2 倍。
默认隐藏
*/
.big{
position: absolute;
left: 510px;
top: 0;
width: 400px;
height: 400px;
overflow: hidden;
border:1px #000 solid;
display: none;
}
/* 大图的图片,宽高为小图的 2 倍
绝对定位,方便更改位置
*/
.big img{
position: absolute;
width: 1000px;
height: 1000px;
top: 0;
left: 0;
}
JavaScript代码
{
let small = document.querySelector("#small");
let mask = document.querySelector("#mask");
let big = document.querySelector("#big");
let bigImg= document.querySelector("#big>img");
small.addEventListener("mouseenter",function(){
big.style.display = "block" ;
});
small.addEventListener("mouseleave",function(){
big.style.display = "none" ;
});
small.addEventListener("mousemove",function(event){
let pos = small.getBoundingClientRect();
let x = event.clientX -pos.x ;
let y = event.clientY - pos.y ;
console.info(x,y);
/* mask 跟着鼠标走 */
/* 判断坐标 , 不能让 mask 超出 small 的范围 */
if( x< 100 ){ x = 100 ; }
if( x > 400 ){ x = 400 ; }
( y < 100 )&&( y = 100 );
( y > 400 )&&( y = 400 );
/* 设定 mask 的位置 */
mask.style.left = (x-100) + "px";
mask.style.top = (y-100) + "px";
/* 控制大图的移动
大图位置是 mask 位置的反向*2
* */
bigImg.style.left = -(x-100)*2+"px";
bigImg.style.top = -(y-100)*2+"px";
});
}
完工。
也可以拓展成下面几个缩略图,点击换图的效果。只要更换掉小图和大图的 src 路径即可。这里就不拓展了。
觉得好的,点个赞呗~ 哈~