在做放大镜的效果时,我们应该有一定的想象力,其实并不是将图片放大,而是当鼠标移动到小图片的位置时,大图片移动的位置是小图片比上大图片然后再被小图片移动距离除,就能得出大图片的距离,从而达到放大效果
自己做的这个仅供大家参考,也有自己不太对的地方,还望大神指点,谢谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.clear::after{
content: "";
clear: both;
display: block;
}
.main{
width: 600px;
height: 600px;
margin: 20px auto;
}
.box{
width: 400px;
height: 400px;
position: relative;
cursor: move;
border: 1px solid #ccc;
}
.box h2{
width: 100%;
height: 100%;
border: 1px solid red;
display: none;
}
.box .mask{
width: 200px;
height: 200px;
background-color: #fede4f;
opacity: .5;
display: none;
position: absolute;
left: 0;
top: 0;
}
.box .bigbox{
width: 400px;
height: 400px;
border: 1px solid #ccc;
overflow: hidden;
position: absolute;
left: 420px;
top: 0px;
display: none;
}
.box .bigbox img{
position: absolute;
left: 0;
top: 0;
}
.list{
width: 400px;
list-style: none;
margin-top: 20px;
}
.list li{
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
cursor: pointer;
border: 2px solid transparent;
}
.list .show{
border: 2px solid #fc3604;
}
.box .active{
display: block;
}
</style>
<body>
<div class="main">
<div class="box">
<h2 class="active"><img src="./images/1.jpg" alt=""></h2>
<div class="mask"></div>
<div class="bigbox">
<img src="./images/big1.jpg" alt="" class="">
</div>
</div>
<ul class="list clear">
<li class="show"><img src="./images/small1.jpg" alt=""></li>
<li><img src="./images/small2.jpg" alt=""></li>
<li><img src="./images/small3.jpg" alt=""></li>
<li><img src="./images/small4.jpg" alt=""></li>
<li><img src="./images/small5.jpg" alt=""></li>
</ul>
</div>
<script>
class Magnifier{
constructor(ele,imgarr){
this.ele = ele;
this.imgarr = imgarr;
this.box = this.ele.querySelector('.box');
this.mask = this.ele.querySelector('.mask');
this.bigbox = this.ele.querySelector('.bigbox');
this.img = this.ele.querySelector('.bigbox img');
this.ul = this.ele.querySelectorAll('.list li');
this.h2 = this.ele.querySelector('.box h2 img');
}
init(){
this.Clickbox();
this.Move();
this.MoveLi();
}
Clickbox(){
this.box.onmouseenter = ()=>{
this.mask.style.display = 'block';
this.bigbox.style.display = 'block';
}
this.box.onmouseleave = ()=>{
this.mask.style.display = 'none';
this.bigbox.style.display = 'none';
}
}
Move(){
this.box.onmousemove = (e)=>{
let maskX = (e.pageX-this.box.offsetLeft-this.box.clientLeft-this.mask.clientWidth/2);
let maskY = (e.pageY-this.box.offsetTop-this.box.clientTop-this.mask.clientHeight/2);
if(maskX < 0){
maskX = 0;
}else if(maskX>(this.box.clientWidth-this.mask.clientWidth)){
maskX = this.box.clientWidth-this.mask.clientWidth;
}
if(maskY<0){
maskY = 0;
}else if(maskY>(this.box.clientHeight-this.mask.clientHeight)){
maskY = this.box.clientHeight-this.mask.clientHeight;
}
this.mask.style.left = maskX + 'px';
this.mask.style.top = maskY + 'px';
this.img.style.left = -(maskX*this.bigbox.offsetWidth/this.mask.offsetWidth) + 'px';
this.img.style.top = -(maskY*this.bigbox.offsetHeight/this.mask.offsetHeight) + 'px';
}
}
MoveLi(){
this.ul.forEach((v,k)=>{
v.addEventListener('mouseenter',()=>{
this.ul.forEach(function(val,key){
val.className = '';
})
v.className = 'show';
this.h2.src = this.imgarr[k].size;
this.img.src = this.imgarr[k].big;
})
});
}
}
const arr = [
{big:'./images/big1.jpg',size:'./images/1.jpg',small:'./images/small1.jpg'},
{big:'./images/big2.jpg',size:'./images/2.jpg',small:'./images/small2.jpg'},
{big:'./images/big3.jpg',size:'./images/3.jpg',small:'./images/small3.jpg'},
{big:'./images/big4.jpg',size:'./images/4.jpg',small:'./images/small4.jpg'},
{big:'./images/big5.jpg',size:'./images/5.jpg',small:'./images/small5.jpg'}
]
let main = document.querySelector('.main');
const obj = new Magnifier(main,arr);
obj.init();
</script>
</body>
</html>