 |
waitMeOYV2EX 第 682557 号会员，加入于 2024-03-29 16:09:49 +08:00今日活跃度排名 778993
 56  |
waitMeOY 最近回复了
1 天前 回复了 loulijun 创建的主题 › 问与答 › 始祖鸟的衣服为什么这么受欢迎？ |
不知道鸟和北面哪个更保暖。
37 天前 回复了 chanChristin 创建的主题 › 职场话题 › 今天 1024，程序员节发什么福利了吗？ |
空气。以前好像发过橙子啥的
42 天前 回复了 waitMeOY 创建的主题 › 职场话题 › 兄弟们，大家工作里的委屈怎么排解呢？ |
@zebraooooo 大佬，您是之前看过类似的例子，还是啥关键词搜出来的。太牛逼了。。。 我这不止沟通能力，搜索能力和实际能力也确实差太远。
44 天前 回复了 waitMeOY 创建的主题 › 职场话题 › 兄弟们，大家工作里的委屈怎么排解呢？ |
@Tdy95 base64 后加了。兄弟是叫 在家早餐吃什么吗？
44 天前 回复了 waitMeOY 创建的主题 › 职场话题 › 兄弟们，大家工作里的委屈怎么排解呢？ |
44 天前 回复了 waitMeOY 创建的主题 › 职场话题 › 兄弟们，大家工作里的委屈怎么排解呢？ |
@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>
<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>
52 天前 回复了 waitMeOY 创建的主题 › 问与答 › 适合孕妇午休的办公椅 |
52 天前 回复了 waitMeOY 创建的主题 › 问与答 › 适合孕妇午休的办公椅 |
@BoyBoy 久坐这个肯定不存在，据观察 半个小时就要上一次厕所。除非不喝水，不然晚上要起来三四次呢。
52 天前 回复了 lfitzgerald 创建的主题 › 买买买 › 打算双十一买一个人体工学椅， 1000 以内，有推荐的吗 |
@xiaozecn 四川有 其他地方貌似没吧
62 天前 回复了 waitMeOY 创建的主题 › Android › 接入 autosize 之后 toast 问题布局显示不全了，横向无法撑满，是为啥 |
@andforce 后续修改把 autosize 去掉，dp 配合不同的 dpi 目录能搞定能解决但是这个成本太高了， 所有的布局文件都要改一遍但是要解决眼下问题大佬有思路吗？
Select Language