保留源代码汉化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>名片</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.card-container {
width: 350px;
height: 200px;
perspective: 1000px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-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);
}
h2 {
margin: 0;
font-size: 1.5em;
}
p {
margin: 5px 0;
}
.company-info {
text-align: center;
}
.card-front img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
.card-back img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card" id="card">
<div class="card-face card-front">
<img class="image_1" src="https://cdn.discordapp.com/attachments/991048319121911868/1284092080305471610/1.png?ex=66e55f71&is=66e40df1&hm=04eda4eb5efeb61fe6b7f494e6acfd45d674944a82eea6075391a674f0cdd462&" alt="">
<div class="info-texts">
<h2 class="personal_name">2 Leon</h2>
<p class="personal_job">4</p>
</div>
<div class="info-texts">
<p class="personal_mail">2@lslawyers.com</p>
<p class="personal_number">+1 (123) 456-7890</p>
</div>
</div>
<div class="card-face card-back">
<img class="image_2" src="https://media.discordapp.net/attachments/991048319121911868/1284092079886303252/2.png?ex=66e55f71&is=66e40df1&hm=9904404760892c4cd8ac7a9141daf05dc5819b8f5e1c62a465b39bf50012407b&=&format=webp&quality=lossless" alt="">
<div class="company-info">
<h4 class="job_adress">4 Vinewood Boulevard, Los Santos, San Andreas</h4>
<p class="job_web_link">www.4.com</p>
</div>
</div>
</div>
</div>
<script>
$(".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) {
$(".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) {
isFlipped = deltaX > 0;
card.style.transform = isFlipped ? 'rotateY(180deg)' : 'rotateY(0)';
}
});
card.addEventListener('dragstart', (e) => e.preventDefault());
</script>
</body>
</html>
以下是保留源代码并进行汉化的版本：
/* 名片样式 */
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()); // 禁止拖动默认事件
以上代码已经完成了汉化，注释部分详细说明了每行代码的功能。
页:
[1]