实现图片的放大与改变放大之后的样式
Html部分
<div id = "image"></div> //这里引入一个div标签,后面以div标签开始
CSS部分
<style>
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
} //设置基本body样式
#image {
width: 300px;
height: 300px;
background-color: #000;
background-image: url(../../ASNA/003A.jpg);
background-size: 300px 300px;
background-repeat: no-repeat; //直接进入页面的静态样式
}
#image[zoomed]{
background-size: 720px 720px;
border: 3px yellow solid;
background-position: calc(var(--x)*100%) calc(var(--y)*100%);
} //预设置的变化样式
</style>
JS部分
document.querySelector('#image').addEventListener('mouseenter',enterHandler)
//定义一个鼠标移入的函数
document.querySelector('#image').addEventListener('mousemove',moveHandler)
//定义鼠标在图片内部移动的函数
document.querySelector('#image').addEventListener('mouseleave',leaveHandler)
//定义鼠标移出图片的函数
function enterHandler(e) {
e.target.setAttribute('zoomed',1)
} //鼠标进入图片,添加zoomed的class名
function moveHandler(e) {
let rect = e.target.getBoundingClientRect()
let x = e.offsetX / rect.width
let y = e.offsetY / rect.height
e.target.style.setProperty('--x',x)
e.target.style.setProperty('--y',y)
} //鼠标在图片中移动,显示位置跟随鼠标移动
function leaveHandler(e){
e.target.removeAttribute('zoomed')
} //鼠标溢出图片
20230113_012212
放大后