以下是保留源代码并进行汉化的版本：
/* 名片样式 */
body {
font-family: Arial, sans-serif; /* 字体 */
display: flex; /* 使用弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 高度为视口高度 */
margin: 0; /* 去掉默认边距 */
-webkit-user-select: none; /* 禁止用户选择（Webkit浏览器） */
-moz-user-select: none; /* 禁止用户选择（Firefox浏览器） */
-ms-user-select: none; /* 禁止用户选择（IE浏览器） */
user-select: none; /* 禁止用户选择 */
}
.card-container {
width: 350px; /* 卡片容器宽度 */
height: 200px; /* 卡片容器高度 */
perspective: 1000px; /* 透视效果 */
}
.card {
width: 100%; /* 卡片宽度 */
height: 100%; /* 卡片高度 */
position: relative; /* 相对定位 */
transform-style: preserve-3d; /* 保留3D效果 */
transition: transform 0.6s; /* 变换过渡效果 */
cursor: grab; /* 鼠标指针样式 */
}
.card:active {
cursor: grabbing; /* 鼠标按下时指针样式 */
}
.card-face {
position: absolute; /* 绝对定位 */
width: 100%; /* 宽度 */
height: 100%; /* 高度 */
backface-visibility: hidden; /* 背面隐藏 */
display: flex; /* 使用弹性布局 */
flex-direction: column; /* 列方向布局 */
justify-content: space-between; /* 均匀分布 */
padding: 20px; /* 内边距 */
box-sizing: border-box; /* 包含边框和内边距在内的宽高计算 */
border-radius: 10px; /* 圆角 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
overflow: hidden; /* 溢出隐藏 */
}
.card-front {
background-color: white; /* 正面背景颜色 */
}
.card-back {
background-color: #2c3e50; /* 背面背景颜色 */
color: white; /* 文字颜色 */
transform: rotateY(180deg); /* 背面旋转180度 */
}
h2 {
margin: 0; /* 去掉默认边距 */
font-size: 1.5em; /* 字体大小 */
}
p {
margin: 5px 0; /* 段落边距 */
}
.company-info {
text-align: center; /* 公司信息居中 */
}
.card-front img,
.card-back img {
width: 100%; /* 图片宽度 */
height: 100%; /* 图片高度 */
position: absolute; /* 绝对定位 */
top: 0; /* 顶部 */
left: 0; /* 左侧 */
opacity: 0.8; /* 透明度 */
}
/* JavaScript 部分 */
$(".card-container").fadeOut(1);
window.addEventListener('message', function(event) {
if (event.data.type == "open") { // 如果消息类型为打开
if (event.data.image == true) { // 如果需要显示图像
$(".info-texts").fadeOut(1);
$(".company-info").fadeOut(1);
$(".card-container").fadeIn(1000);
$(".image_1").fadeIn(1000);
$(".image_2").fadeIn(1000);
$(".image_1").attr("src", event.data.front); // 设置正面图片
$(".image_2").attr("src", event.data.back); // 设置背面图片
} else {
$(".image_1").fadeOut(1);
$(".image_2").fadeOut(1);
$(".card-container").fadeIn(1000);
$(".info-texts").fadeIn(1000);
$(".company-info").fadeIn(1000);
document.querySelector('.personal_name').textContent = event.data.name; // 设置姓名
document.querySelector('.personal_job').textContent = event.data.job; // 设置职位
document.querySelector('.personal_mail').textContent = event.data.mail; // 设置邮件
document.querySelector('.personal_number').textContent = event.data.number; // 设置电话
document.querySelector('.job_adress').textContent = event.data.address; // 设置地址
document.querySelector('.job_web_link').textContent = event.data.web; // 设置网站链接
}
}
});
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) { // 如果按下ESC键
$(".card-container").fadeOut(1000); // 隐藏卡片容器
$.post('https://nm-businesscards/exit', JSON.stringify({})); // 发送退出请求
which = 0; // 重置变量
}
};
const card = document.getElementById('card'); // 获取卡片元素
let startX; // 开始坐标
let isFlipped = false; // 是否翻转
card.addEventListener('mousedown', (e) => {
startX = e.clientX; // 记录开始点击位置
});
card.addEventListener('mousemove', (e) => {
if (e.buttons !== 1) return; // 只有按下左键才执行
const deltaX = e.clientX - startX; // 计算移动距离
if (Math.abs(deltaX) > 50) { // 如果移动超过50像素
isFlipped = deltaX > 0; // 判断翻转方向
card.style.transform = isFlipped ? 'rotateY(180deg)' : 'rotateY(0)'; // 设置旋转
}
});
card.addEventListener('dragstart', (e) => e.preventDefault()); // 禁止拖动默认事件
以上代码已经完成了汉化，注释部分详细说明了每行代码的功能。 | 
提升卡
变色卡
千斤顶
