<!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>
.AYASpace_img {
display: block;
left: 50%;
width: 70px;
height: 70px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div {
height: 50000px;
}
</style>
<body>
<div>
<img style="transform:matrix(2.333, 0, 0, 2.95423, 0, 0); " class="AYASpace_img" src="./APPAYASpace图片/1-1.png"
alt="">
</div>
</body>
</html>
<script>
const getScrollTop = () => {
let scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
}
else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
const Top = () => getScrollTop() / 100
const Actuating = () => {
if (Top() > 100) {
return
}
document.querySelector('.AYASpace_img').style.transform = `matrix(${Top()}, 0, 0, ${Top()}, 0, 0)`
}
{ document.addEventListener('scroll', Actuating) }
</script>transform:matrix实现鼠标滚动放大缩小。
猜你喜欢
转载自blog.csdn.net/sunwanfulove/article/details/127126523
今日推荐
周排行