这里是用三张图做成一套放大镜
*{
padding: 0;
margin: 0;
list-style: none;
}
.box{
width: 400px;
height: 500px;
margin-left:100px;
/* border:3px solid #00f; */
}
.m{
width: 400px;
height: 400px;
/* border:1px solid #000; */
position: relative;
}
.small ul li{
margin:0 5px;
border:1px solid #0f0;
}
.small ul li img{
vertical-align: middle;
}
.small ul{
width: 400px;
height: 100px;
display:flex;
align-items: center;
justify-content: flex-start;
}
.small ul li.active{
border-color:#f00;
}
.shade{
width: 100px;
height: 100px;
background:rgba(255,255,0,0.5);
position: absolute;
left:0;
top: 0;
display:none;
}
.big{
width: 400px;
height: 400px;
position:absolute;
left:105%;
top:0;
border:solid;
background-image:url("./images/big1.jpg");
background-size:1600px 1600px;
display:none;
background-repeat:no-repeat;
}
.middle{
width: 400px;
height: 400px;
border:1px solid #000;
position:absolute;
left:0;
top:0;
}
.shade:hover{
cursor:move;
}
/*
比例:
中等图和遮罩的比例 === 大图和大盒子的比例
400/100 === 1600/400
*/
// 遮罩在中等图片上移动过的距离/中等图片 === 大图移动的距离/大图
// 遮罩在中等图上向右移动了 中图1/4
// 大图就应该想左移动 大图的1/4
// 先做鼠标放到中等盒子上,遮罩和大盒子显示
function Enlarge(classname){
// 将需要操作的元素都获取成对象属性
this.box = document.querySelector("."+classname);
this.m = this.box.querySelector(".m");
this.middleImg = this.box.querySelector(".m img");
this.middle = this.box.querySelector(".middle");
this.shade = this.box.querySelector(".shade");
this.ulis = this.box.querySelectorAll("ul li");
this.big = this.box.querySelector(".big");
var _this = this;
// 绑定事件
this.middle.onmouseenter = ()=>{
this.over();
}
this.middle.onmouseleave= ()=>{
// console.log(456);
this.out();
}
// 点击小图的事件
for(var i=0;i this.ulis[i].onclick = function(){ _this.click(this); } } } // 定义点击小图方法 Enlarge.prototype.click = function(ele){ // console.log(ele); // 将所有li的红框去掉 for(var i=0;i this.ulis[i].style.borderColor = "#0f0" } // 给自己加红框 ele.style.borderColor = "#f00"; // 需要切换对应的中等图片 // 先获取当前点击的li中的图片的路径 // 先找到小图片这个标签 var smallImg = ele.firstElementChild.firstElementChild; // 通过这个标签的src找路径 - src属性获取 var smallPath = smallImg.getAttribute("src"); // './images/small2.jpg' // str.slice(开始下标); // 点最后一次出现的位置 var lastIndex = smallPath.lastIndexOf("."); // 根据点的位置截取数字以及后面的扩展名 var suffix = smallPath.slice(lastIndex-1); // 拼接中等图片的路径 var middlePath = "./images/middle" + suffix; // 给中等图片的img标签设置src属性 this.middleImg.setAttribute("src",middlePath); // 设置大图的路径 var bigPath = "./images/big"+suffix; // 设置给大盒子的背景 this.big.style.backgroundImage = "url("+bigPath+")" // console.log(suffix); } // 定义鼠标离开中的图片上的方法 Enlarge.prototype.out = function(){ this.shade.style.display = "none" this.big.style.display = "none" } // 定义鼠标放到中等图片上的方法 Enlarge.prototype.over = function(){ // console.log(123); this.shade.style.display = "block" this.big.style.display = "block" var _this = this; // 需要一个鼠标移动事件 this.middle.onmousemove=function(e){ // console.log(123); // 拖拽- 需要获取光标位置 var e = e || window.event; var x = e.pageX; var y = e.pageY; // console.log(x,y); var l = x - _this.box.offsetLeft - this.offsetLeft - _this.shade.offsetWidth/2; if(l<=0){ l=0; } if(l>=this.clientWidth - _this.shade.offsetWidth){ l=this.clientWidth - _this.shade.offsetWidth } _this.shade.style.left = l + "px"; var t = y - _this.box.offsetTop - this.offsetTop - _this.shade.offsetHeight/2; if(t<=0){ t = 0; } if(t>=this.clientHeight - _this.shade.offsetHeight){ t=this.clientHeight - _this.shade.offsetHeight } _this.shade.style.top = t + "px"; // 大图也跟着移动 _this.fangda(l,t); } } Enlarge.prototype.fangda = function(l,t){ // 需要计算移动过的比例 // 遮罩距离左边的距离 - l // 大图的宽度 var w = this.middle.clientWidth; // 比例就是 l/w; var percentw = l/w; // 根据这个比例计算大图的left值 // 这个比例就应该等于 大图的left/大图的宽度(大图宽度设置过背景大小) // 获取背景大小 var style = window.getComputedStyle(this.big).backgroundSize; // 获取到的是宽px 高px组成的一个字符串 ,需要使用空格分隔获取到具体的宽和高 var bigW = parseInt(style.split(" ")[0]); // 大图的left就是比例 * 大图的宽 var bigL = percentw * bigW; // 高度 var h = this.middle.clientHeight; var percenth = t/h; var bigH = parseInt(style.split(" ")[1]); var bigT = percenth * bigH; // 需要设置给背景的定位 this.big.style.backgroundPosition = `-${bigL}px -${bigT}px`; // console.log(bigW); } var enlarge = new Enlarge("box"); // 1.遮罩的位置一定要在光标位置基础上 - 外面盒子左边的间距 // 2.如果有滚动条,光标位置就使用pageX pageY // 3.放大镜,咱们讲的使用的是3套图,小、中、大,但是放大镜可以使用一套图来做 - 如果使用小图放大会模糊,大图缩小不模糊 - 一定要找大图去做这是只用一张图做
.middle{
width: 400px;
height: 400px;
border:1px solid #000;
position:relative;
}
.middle>img{
width: 400px;
height: 400px;
}
.small{
width: 400px;
height: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.small img{
border:1px solid #0f0;
width: 50px;
height: 50px;
margin:0 5px;
}
.small img.active{
border-color:red;
}
.shade{
width: 100px;
height: 100px;
background:rgba(255,255,0,0.5);
position:absolute;
left: 0;
top: 0;
display:none;
}
.big{
width: 400px;
height: 400px;
position: absolute;
left:105%;
top: 0;
overflow:hidden;
display:none;
}
.big>img{
width: 1600px;
height: 1600px;
position:absolute;
left: 0;
top: 0;
}
.box{
margin:50px;
}
.shade:hover{
cursor:move;
}
function Enlarge(){
// 获取元素
this.box = document.querySelector(".box");
this.middle = this.box.querySelector(".middle");
this.middleImg = this.box.querySelector(".middle>img");
this.shade = this.box.querySelector(".shade");
this.big = this.box.querySelector(".big");
this.bigImg = this.box.querySelector(".big>img");
this.smallImgs = this.box.querySelectorAll(".small>img");
var _this = this;
// 鼠标移入显示遮罩和大图
this.middle.onmouseover = ()=>{
this.over();
}
this.middle.onmouseout = ()=>{
this.out();
}
// 小图的点击事件
for(var i=0;i this.smallImgs[i].onclick=function(){ _this.click(this); } } } // 小图的点击事件 Enlarge.prototype.click = function(ele){ for(var i=0;i this.smallImgs[i].className = ''; } ele.className = "active" // 点小图换中图和大图 // 获取当前点击元素的src // ele.getAttribute("src"); // 元素有一些属性可以直接使用 . 来操作,比如,index、src // console.log(ele.src); this.middleImg.src = this.bigImg.src = ele.src } Enlarge.prototype.over = function(){ this.shade.style.display = this.big.style.display = "block"; // 中等盒子的移动事件 this.middle.onmousemove= e=>{ // 拖拽 - 获取光标位置 var e = e || window.event; var x = e.pageX; var y = e.pageY; var l = x - this.box.offsetLeft - this.shade.clientWidth/2; if(l<=0){ l = 0; } if(l>=this.middle.clientWidth - this.shade.clientWidth){ l=this.middle.clientWidth - this.shade.clientWidth } this.shade.style.left = l + "px" var t = y - this.box.offsetTop - this.shade.clientHeight/2; if(t<=0){ t = 0; } if(t>=this.middle.clientHeight - this.shade.clientHeight){ t=this.middle.clientHeight - this.shade.clientHeight } this.shade.style.top = t + "px" // 计算比例 var percentX = this.shade.offsetLeft/this.middle.clientWidth; var percentY = this.shade.offsetTop/this.middle.clientHeight; // 根据比例计算大图应该定位的值 var bigX = this.bigImg.clientWidth * percentX; var bigY = this.bigImg.clientHeight * percentY; // 将值设置给大图的定位 this.bigImg.style.left = -bigX + "px"; this.bigImg.style.top = -bigY + "px"; } } Enlarge.prototype.out = function(){ this.shade.style.display = this.big.style.display = "none" } var enlarge = new Enlarge();