写购物项目的时候，需要放大图片，这里用js写了一个方法，鼠标悬浮的时候放大当前图片
这个是class写法
<!--
* @Descripttion:
* @Author: 苍狼一啸八荒惊
* @LastEditTime: 2024-07-10 09:41:34
* @LastEditors: 夜空苍狼啸
-->
<!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>商品详情</title>
<!-- <link rel="stylesheet" href="./css/detail.css"> -->
<style>
.product_wrapper {
width: 1200px;
margin: 0 auto;
font: 12px "Hiragino Sans GB", "Verdana", "Simsun";
background-color: #fff;
}
.product_wrapper .detail {
overflow: hidden;
}
.product_wrapper .detail .list_detail {
width: 320px;
height: 320px;
float: left;
padding: 0 20px 30px 0;
position: relative;
}
.product_wrapper .detail .list_detail .list_detail_1 {
width: 280px;
height: 280px;
position: relative;
}
.product_wrapper .detail .list_detail .list_detail_1>img {
width: 100%;
height: 100%;
}
.product_wrapper .detail .list_detail .list_detail_1 .mask {
width: 150px;
height: 150px;
background: url(../img/zoom_pup.png);
opacity: 0.5;
position: absolute;
left: 30px;
top: 40px;
pointer-events: none;
display: none;
}
.product_wrapper .detail .list_detail .list_detail_2 {
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.product_wrapper .detail .list_detail .list_detail_2>img {
width: 54px;
height: 54px;
margin-right: 50px;
cursor: pointer;
}
.product_wrapper .detail .list_detail .list_detail_2 .active {
box-shadow: 0 0 8px rgb(255, 255, 255) inset, 0 0 8px red;
}
.product_wrapper .detail .list_detail .list_detail_enlarge {
width: 480px;
height: 480px;
position: absolute;
position: absolute;
left: 90%;
top: 0;
overflow: hidden;
display: none;
z-index: 999;
}
.product_wrapper .detail .list_detail .list_detail_enlarge>img {
display: block;
width: 800px;
height: 800px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="product_wrapper">
<div class="detail hover">
<div class="list_detail" id="box">
<!-- 放大镜 -->
<div class="list_detail_1">
<img src="./img/lx1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="list_detail_2">
<img src="./img/lx1.jpg" class="active" alt="" data-show="./img/lx1.jpg" data-bg="./img/lx1.jpg">
<img src="./img/lx2.jpg" alt="" data-show="./img/lx2.jpg" data-bg="./img/lx2.jpg">
<img src="./img/lx3.jpg" alt="" data-show="./img/lx3.jpg" data-bg="./img/lx3.jpg">
</div>
<div class="list_detail_enlarge enlarge">
<!-- <img src="./img/lx1.jpg" alt=""> -->
<img src="http://img3m2.ddimg.cn/27/17/25583112-1_u_11.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- 引入放大镜 -->
<!-- <script src="./js/detail.js"></script> -->
<script>
// 放大镜
class Enlarge {
constructor(select) {
// 0-1. 获取到范围元素, 目的是为了让所有内容都出现在这里面
this.ele = document.querySelector(select)
this.show = this.ele.querySelector('.list_detail_1')
this.mask = this.ele.querySelector('.mask')
this.list = this.ele.querySelector('.list_detail_2')
this.enlarge = this.ele.querySelector('.enlarge')
this.bg = this.enlarge.firstElementChild
// 需要一些尺寸数据
this.show_w = this.show.clientWidth
this.show_h = this.show.clientHeight
// 非行内样式获取
this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
this.bg_w = parseInt(window.getComputedStyle(this.bg).width)
this.bg_h = parseInt(window.getComputedStyle(this.bg).height)
// 在这里调用函数来启动
this.setScale()
this.overOut()
this.listChange()
this.move()
}
// 计算数值
setScale() {
// 1. 计算数值
this.enlarge_w = this.mask_w * this.bg_w / this.show_w
this.enlarge_h = this.mask_h * this.bg_h / this.show_h
// 2. 给 this.enlarge 赋值
this.enlarge.style.width = this.enlarge_w + 'px'
this.enlarge.style.height = this.enlarge_h + 'px'
}
// 鼠标经过显示遮罩层, 图片放大
overOut() {
this.show.addEventListener('mouseover', () => {
this.mask.style.display = 'block'
this.enlarge.style.display = 'block'
})
this.show.addEventListener('mouseout', () => {
this.mask.style.display = 'none'
this.enlarge.style.display = 'none'
})
}
// tab 切换
listChange() {
this.list.addEventListener('click', e => {
// 处理事件对象兼容
e = e || window.event
// 处理事件目标兼容
const target = e.target || e.srcElement
// 判断点击的是 img 标签
if (target.nodeName !== 'IMG') return
// 1. 切换 img 类名
for (let i = 0; i < this.list.children.length; i++) {
this.list.children[i].classList.remove('active')
}
target.classList.add('active')
// 2. 切换 show里面img 和 bg 的 src
const showUrl = target.dataset.show
const bgUrl = target.dataset.bg
this.show.firstElementChild.src = showUrl
this.bg.src = bgUrl
})
}
// 鼠标移动
move() {
// 1. 绑定事件
this.show.addEventListener('mousemove', e => {
e = e || window.event
// 2. 获取光标坐标点
let x = e.offsetX - this.mask_w / 2
let y = e.offsetY - this.mask_h / 2
// 3. 边界值判断
if (x <= 0) x = 0
if (y <= 0) y = 0
if (x >= this.show_w - this.mask_w) x = this.show_w - this.mask_w
if (y >= this.show_h - this.mask_h) y = this.show_h - this.mask_h
this.mask.style.left = x + 'px'
this.mask.style.top = y + 'px'
const bg_x = x * this.enlarge_w / this.mask_w * -1
const bg_y = y * this.enlarge_h / this.mask_h * -1
this.bg.style.left = bg_x + 'px'
this.bg.style.top = bg_y + 'px'
})
}
}
const enlarge = new Enlarge('#box')
</script>
</body>
</html>
这个是函数写法
<!--
* @Descripttion:
* @Author: 苍狼一啸八荒惊
* @LastEditTime: 2024-07-10 09:41:34
* @LastEditors: 夜空苍狼啸
-->
<!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>商品详情</title>
<!-- <link rel="stylesheet" href="./css/detail.css"> -->
<style>
.product_wrapper {
width: 1200px;
margin: 0 auto;
font: 12px "Hiragino Sans GB", "Verdana", "Simsun";
background-color: #fff;
}
.product_wrapper .detail {
overflow: hidden;
}
.product_wrapper .detail .list_detail {
width: 320px;
height: 320px;
float: left;
padding: 0 20px 30px 0;
position: relative;
}
.product_wrapper .detail .list_detail .list_detail_1 {
width: 280px;
height: 280px;
position: relative;
}
.product_wrapper .detail .list_detail .list_detail_1>img {
width: 100%;
height: 100%;
}
.product_wrapper .detail .list_detail .list_detail_1 .mask {
width: 150px;
height: 150px;
background: url(../img/zoom_pup.png);
opacity: 0.5;
position: absolute;
left: 30px;
top: 40px;
pointer-events: none;
display: none;
}
.product_wrapper .detail .list_detail .list_detail_2 {
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.product_wrapper .detail .list_detail .list_detail_2>img {
width: 54px;
height: 54px;
margin-right: 50px;
cursor: pointer;
}
.product_wrapper .detail .list_detail .list_detail_2 .active {
box-shadow: 0 0 8px rgb(255, 255, 255) inset, 0 0 8px red;
}
.product_wrapper .detail .list_detail .list_detail_enlarge {
width: 480px;
height: 480px;
position: absolute;
position: absolute;
left: 90%;
top: 0;
overflow: hidden;
display: none;
z-index: 999;
}
.product_wrapper .detail .list_detail .list_detail_enlarge>img {
display: block;
width: 800px;
height: 800px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="product_wrapper">
<div class="detail hover">
<div class="list_detail" id="box">
<!-- 放大镜 -->
<div class="list_detail_1">
<img src="./img/lx1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="list_detail_2">
<img src="./img/lx1.jpg" class="active" alt="" data-show="./img/lx1.jpg" data-bg="./img/lx1.jpg">
<img src="./img/lx2.jpg" alt="" data-show="./img/lx2.jpg" data-bg="./img/lx2.jpg">
<img src="./img/lx3.jpg" alt="" data-show="./img/lx3.jpg" data-bg="./img/lx3.jpg">
</div>
<div class="list_detail_enlarge enlarge">
<img src="./img/lx1.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- 引入放大镜 -->
<!-- <script src="./js/detail.js"></script> -->
<script>
/*
* @Descripttion:
* @Author: 苍狼一啸八荒惊
* @LastEditTime: 2024-07-10 10:18:57
* @LastEditors: 夜空苍狼啸
*/
// 放大镜
// 0-1. 获取到范围元素, 目的是为了让所有内容都出现在这里面
let ele = document.querySelector('#box')
let show = ele.querySelector('.list_detail_1')
let mask = ele.querySelector('.mask')
let list = ele.querySelector('.list_detail_2')
let enlarge = ele.querySelector('.enlarge')
let bg = enlarge.firstElementChild
// 需要一些尺寸数据
let show_w = show.clientWidth
let show_h = show.clientHeight
// 非行内样式获取
let mask_w = parseInt(window.getComputedStyle(mask).width)
let mask_h = parseInt(window.getComputedStyle(mask).height)
let bg_w = parseInt(window.getComputedStyle(bg).width)
let bg_h = parseInt(window.getComputedStyle(bg).height)
// 计算数值
// 1. 计算数值
enlarge_w = mask_w * bg_w / show_w
enlarge_h = mask_h * bg_h / show_h
// 2. 给 enlarge 赋值
enlarge.style.width = enlarge_w + 'px'
enlarge.style.height = enlarge_h + 'px'
// 鼠标经过显示遮罩层, 图片放大
show.addEventListener('mouseover', () => {
mask.style.display = 'block'
enlarge.style.display = 'block'
})
show.addEventListener('mouseout', () => {
mask.style.display = 'none'
enlarge.style.display = 'none'
})
// tab 切换
list.addEventListener('click', e => {
// 处理事件对象兼容
e = e || window.event
// 处理事件目标兼容
const target = e.target || e.srcElement
// 判断点击的是 img 标签
if (target.nodeName !== 'IMG') return
// 1. 切换 img 类名
for (let i = 0; i < list.children.length; i++) {
list.children[i].classList.remove('active')
}
target.classList.add('active')
// 2. 切换 show里面img 和 bg 的 src
const showUrl = target.dataset.show
const bgUrl = target.dataset.bg
show.firstElementChild.src = showUrl
bg.src = bgUrl
})
// 鼠标移动
// 1. 绑定事件
show.addEventListener('mousemove', e => {
e = e || window.event
// 2. 获取光标坐标点
let x = e.offsetX - mask_w / 2
let y = e.offsetY - mask_h / 2
// 3. 边界值判断
if (x <= 0) x = 0
if (y <= 0) y = 0
if (x >= show_w - mask_w) x = show_w - mask_w
if (y >= show_h - mask_h) y = show_h - mask_h
mask.style.left = x + 'px'
mask.style.top = y + 'px'
const bg_x = x * enlarge_w / mask_w * -1
const bg_y = y * enlarge_h / mask_h * -1
bg.style.left = bg_x + 'px'
bg.style.top = bg_y + 'px'
})
</script>
</body>
</html>