js实现放大镜多种写法
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.enlarge{
width: 400px;
height: 400px;
margin: 50px auto;
}
.middle{
width: 400px;
height: 400px;
/* border: 3px solid skyblue; */
position: relative;
}
.middle>img{
width: 100%;
height: 100%;
}
.middle .mask{
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0 , 0.5);
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.middle .mask:hover{
cursor: move;
}
.middle .big{
width: 400px;
height: 400px;
/* border: 3px solid skyblue; */
position: absolute;
left: 105%;
top: 0px;
overflow: hidden;
display: none;
}
.middle .big img{
width: 1600px;
height: 1600px;
position: absolute;
left: 0px;
top: 0px;
}
.small img{
width: 100px;
height: 100px;
margin: 10px 5px;
border: 3px solid skyblue;
}
.small img.active{
border-color: red;
}
</style>
<body>
<div class="enlarge">
<div class="middle">
<img src="../4/images/3.JPG" alt="">
<div class="mask"></div>
<div class="big">
<img src="../4/images/3.JPG" alt="">
</div>
</div>
<div class="small">
<img class="active" src="../4/images/3.JPG" alt="">
<img src="../4/images/2.jpg" alt="">
</div>
</div>
</body>
<script>
//获取操作对象
var middleBox = document.querySelector('.middle');
var middleImg = document.querySelector('.middle>img')
var mask= document.querySelector('.mask');
var bigBox = document.querySelector('.middle .big');
var bigImg = document.querySelector('.middle .big>img');
var smallImgs = document.querySelectorAll('.small img');
//给middle盒子绑定事件
middleBox.onmouseover = function() {
// console.log('鼠标移入成功');
mask.style.display = 'block';
bigBox.style.display = 'block';
}
//给middle盒子解绑事件
middleBox.onmouseout = function() {
// console.log('鼠标已移出');
mask.style.display = 'none'
bigBox.style.display = 'none'
}
//获取鼠标移动的位置
middleBox.onmousemove = function() {
//兼容写法
var e = e || window.event
//计算蒙板层的位置
var l = e.pageX - middleBox.offsetLeft - parseInt(mask.offsetWidth/2)
var t = e.pageY - middleBox.offsetTop - parseInt(mask.offsetHeight/2)
//设置边界
var x = middleBox.offsetWidth - mask.offsetWidth
var y = middleBox.offsetHeight - mask.offsetHeight
//图片移动距离
var imgX,imgY
if(l <= 0) {
imgX = 0
mask.style.left = '0px'
} else if(l >= x) {
imgX = x
mask.style.left = x + 'px'
} else {
imgX = l
mask.style.left = l + 'px'
}
if(t <= 0) {
imgY = 0
mask.style.top = '0px'
} else if(t >= x) {
imgY = x
mask.style.top = y + 'px'
} else {
imgY = t
mask.style.top = t + 'px'
}
bigImg.style.left = -4*imgX + 'px'
bigImg.style.top = -4*imgY + 'px'
//小图切换
for(let i=0;i<smallImgs.length;i++) {
//给所有小图片添加点击事件
smallImgs[i].onclick = function() {
//切换小图样式
for(let j=0;j<smallImgs.length;j++) {
smallImgs[j].className = ''
}
smallImgs[i].className = 'active'
middleImg.src = bigImg.src = smallImgs[i].src
}
}
}
</script>
</html>
效果:
面向对象写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.enlarge{
width: 406px;
margin: 50px auto;
}
.middle{
width: 400px;
height: 400px;
border: 3px solid skyblue;
position: relative;
}
.middle>img{
width: 400px;
height: 400px;
}
.middle .mask{
width: 100px;
height: 100px;
background-color: rgba(255, 255, 0, .6);
position: absolute;
top: 0;
left: 0;
display: none;
}
.middle .mask:hover{
cursor: move;
}
.middle .big{
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left:105%;
top: 0;
overflow: hidden;
display: none;
}
.middle .big img{
width: 1600px;
height: 1600px;
position: absolute;
top: 0;
left: 0;
}
.small img{
width: 100px;
height: 100px;
margin: 10px 5px;
border: 3px solid #000;
}
.small img.active{
border-color: red;
}
</style>
<body>
<div class="enlarge">
<div class="middle">
<img src="../image/3.webp" alt="">
<div class="mask"></div>
<div class="big">
<img src="../image/3.webp" alt="">
</div>
</div>
<div class="small">
<img class="active" src="../image/3.webp" alt="">
<img src="../image/1.webp" alt="">
<img src="../image/9.webp" alt="">
</div>
</div>
</body>
<script>
//1.创建一个空的构造函数
function Enlarge(leiming) {
//3.获取标签 - 作为对象属性
this.container = document.querySelector('.'+leiming);
//在指定的大盒子中获取标签元素
this.middleBox = this.container.querySelector('.middle');
this.mask = this.container.querySelector('.mask');
this.bigBox = this.container.querySelector('.big');
this.middleImg = this.container.querySelector('.middle>img');
this.bigImg = this.container.querySelector('.middle .big>img');
this.smallImgs = this.container.querySelectorAll('.small img');
this.init()
}
//4.将事件放在一个方法中
Enlarge.prototype.init = function() {
//点击小图切换中图和大图
for(let i=0;i<this.smallImgs.length;i++) {
this.smallImgs[i].onclick = () => {
//换小图样式
for(let j=0;j<this.smallImgs.length;j++) {
this.smallImgs[j].className = ''
}
this.smallImgs[i].className = 'active'
//切换中图和大图
this.bigImg.src = this.middleImg.src = this.smallImgs[i].src
}
}
//鼠标移入显示
this.middleBox.onmouseover = () => {
this.mask.style.display = this.bigBox.style.display = 'block'
//鼠标在中盒子中移动,让遮罩也跟着鼠标移动
this.middleBox.onmousemove = () => {
// console.log(111,this);
var x = window.event.pageX
var y = window.event.pageY
// console.log(x,y);
//计算遮罩的left和top的值
var l = x - this.middleBox.offsetLeft - this.mask.offsetWidth/2 - parseInt(getComputedStyle(this.middleBox)['border-left-width'])
var t = y - this.middleBox.offsetTop - this.mask.offsetHeight/2 - parseInt(getComputedStyle(this.middleBox)['border-top-width'])
//限制最小值和最大值
if(l < 0) {
l = 0
}
if(t < 0) {
t = 0
}
if(l > this.middleBox.clientWidth - this.mask.offsetWidth) {
l = this.middleBox.clientWidth - this.mask.offsetWidth
}
if(t > this.middleBox.clientHeight - this.mask.offsetHeight) {
t = this.middleBox.clientHeight - this.mask.offsetHeight
}
//设置遮罩的let和top的值
this.mask.style.left = l + 'px'
this.mask.style.top = t + 'px'
//调用图片移动的方法
this.bigImgMove(l,t)
}
}
//鼠标移出隐藏
this.middleBox.onmouseout = () => {
this.mask.style.display = this.bigBox.style.display = 'none'
}
}
//大盒子图片移动的方法
Enlarge.prototype.bigImgMove = function(l,t) {
//计算遮罩在中盒子中左边距离占据中盒子的宽度的比例
var percentX = l / this.middleBox.clientWidth
var percentY = t / this.middleBox.clientHeight
//获取大图的宽高
var bigImgWidth = this.bigImg.clientWidth
var bigImgHeight = this.bigImg.clientHeight
//根据比例计算大图应该移动的left和top的距离
var bigLeft = percentX * bigImgWidth
var bigTop = percentY * bigImgHeight
//设置大图的位置
this.bigImg.style.left = -bigLeft + 'px'
this.bigImg.style.top = -bigTop + 'px'
}
//2.new调用
var e = new Enlarge('enlarge')//将放大镜的大盒子范围当做实参传入
</script>
</html>
效果：
标签：style,width,放大镜,mask,js,middle,var,写法,middleBox 来源： https://www.cnblogs.com/bg618/p/16196318.html