@
Tdy95 大佬，您是用啥写的？ 这个效果真赞。<!DOCTYPE html>
<html>
<head>
<title>4x5 Grid Zoom Demo</title>
<style>
body {
margin: 0;
padding: 0;
height: 200vh; /* 使页面可滚动 */
overflow-y: scroll;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
width: 80%;
margin: 0 auto;
position: relative;
top: 50vh; /* 将网格放置在页面中间 */
}
.grid-item {
background-color: #ccc;
width: 100%;
padding-top: 100%; /* 保持方形 */
position: relative;
transform-origin: center center;
transition: transform 0.1s;
}
.grid-item-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
}
</style>
</head>
<body>
<div class="grid">
<!-- 动态生成 20 个网格项 -->
</div>
<script>
// 生成网格项
var grid = document.querySelector('.grid');
for (var i = 0; i < 20; i++) {
var item = document.createElement('div');
item.classList.add('grid-item');
var content = document.createElement('div');
content.classList.add('grid-item-content');
content.innerHTML = i + 1;
item.appendChild(content);
grid.appendChild(item);
}
function updateItems() {
var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var items = document.querySelectorAll('.grid-item');
items.forEach(function(item) {
var rect = item.getBoundingClientRect();
var itemCenterX = rect.left + rect.width / 2;
var itemCenterY =
rect.top + rect.height / 2;
var dx = itemCenterX - centerX;
var dy = itemCenterY - centerY;
var distance = Math.sqrt(dx * dx + dy * dy);
// 计算缩放比例
var maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
var scale = 1 - (distance / maxDistance);
if (scale < 0.5) scale = 0.5; // 最小缩放
item.style.transform = 'scale(' + scale + ')';
});
}
window.addEventListener('load', updateItems);
window.addEventListener('scroll', updateItems);
window.addEventListener('resize', updateItems);
</script>
</body>
</html>