这里是用三张图做成一套放大镜
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
*{
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
*/
</style>
<body>
<div class="box">
<div class="m">
<div class="middle">
<img src="./images/middle1.jpg" alt="">
<div class="shade"></div>
</div>
<div class="big"></div>
</div>
<div class="small">
<ul>
<li class="active"><a href="#"><img src="./images/small1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/small2.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
// 遮罩在中等图片上移动过的距离/中等图片 === 大图移动的距离/大图
// 遮罩在中等图上向右移动了 中图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.length;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.length;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套图，小、中、大，但是放大镜可以使用一套图来做 - 如果使用小图放大会模糊，大图缩小不模糊 - 一定要找大图去做
</script>
</html>
这是只用一张图做
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<style>
.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;
}
</style>
<body>
<div class="box">
<div class="middle">
<img src="./images/1.jpg">
<div class="shade"></div>
<div class="big">
<img src="./images/1.jpg">
</div>
</div>
<div class="small">
<img class="active" src="./images/1.jpg">
<img src="./images/2.jpg">
</div>
</div>
</body>
<script type="text/javascript">
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.length;i++){
this.smallImgs[i].onclick=function(){
_this.click(this);
}
}
}
// 小图的点击事件
Enlarge.prototype.click = function(ele){
for(var i=0;i<this.smallImgs.length;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();
</script>
</html>
