Skip to content

Commit

Permalink
Merge branch 'main' of github.com:linyisonger/H5.Examples
Browse files Browse the repository at this point in the history
  • Loading branch information
linyisonger committed Oct 6, 2024
2 parents 0606ba3 + bea9724 commit d0d5638
Show file tree
Hide file tree
Showing 2 changed files with 236 additions and 21 deletions.
162 changes: 141 additions & 21 deletions 076.随机数据.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,150 @@
<!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" />
<link rel="stylesheet" href="./assets/global.css" />

<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">
<link rel="stylesheet" href="./assets/global.css">
</head>
<style>
.fakery-box {
padding: 20px;
}
.fakery-subtitle {
font-size: 13px;
color: #c45e5e;
margin-bottom: 10px;
}
.fakery-title {
font-size: 18px;
color: #333;
}
.fakery-item {
display: flex;
padding: 5px 0;
cursor: pointer;
}
.fakery-label {
width: 120px;
font-size: 14px;
color: #333;
}
.fakery-btn {
margin-top: 10px;
padding: 10px 20px;
display: inline-flex;
color: #fff;
background-color: #fd9651;
cursor: pointer;
user-select: none;
}
.ps {
color: #333;
font-size: 12px;
}
.fakery-value.active {
color: #c45e5e;
}
.fakery-value.active::after {
margin-left: 20px;
content: "复制成功~";
font-size: 12px;
}
</style>
</head>

<body>
<div class="fakery-box">
<div class="fakery-header">
<div class="fakery-title">随机数据</div>
</div>
<div class="fakery-subtitle">点击下面想要的数据即可复制到剪贴板上面</div>
<div class="fakery-item">
<div class="fakery-label"></div>
<div class="fakery-value"></div>
</div>
<div class="fakery-item">
<div class="fakery-label"></div>
<div class="fakery-value"></div>
</div>
<div class="fakery-item">
<div class="fakery-label"></div>
<div class="fakery-value"></div>
</div>
<div class="fakery-item">
<div class="fakery-label"></div>
<div class="fakery-value"></div>
</div>
<div class="fakery-item">
<div class="fakery-label"></div>
<div class="fakery-value"></div>
</div>

<div class="fakery-btn again">再来一组</div>
<div class="ps">ps: 如果要在代码开发测试也可以使用@3r/tool这个包😏</div>
</div>

<body>
<script type="module">

// import "https://gcore.jsdelivr.net/npm/@3r/tool@1.5.0/lib/randoms.js";
import { Fakery } from "https://gcore.jsdelivr.net/npm/@3r/tool@1.5.1/lib/fakery.js";
// import "https://gcore.jsdelivr.net/npm/@3r/tool@1.5.0/lib/randoms.js";
import { Fakery } from "https://gcore.jsdelivr.net/npm/@3r/tool@1.5.1/lib/fakery.js";

// 创建假数据组
function createFakeryGroup() {
console.log('身份证号码', Fakery.citizenIdentificationNumber());
console.log('社会统一信用代码', Fakery.usci());
console.log('手机号码', Fakery.phoneNumber());
console.log('姓名', Fakery.fullName());
console.log('银行卡号码 [工商银行卡号]', Fakery.bankCardNumber());
// 创建假数据组
function createFakeryGroup() {
return {
name: Fakery.fullName(),
phone: Fakery.phoneNumber(),
idCard: Fakery.citizenIdentificationNumber(),
backCard: Fakery.bankCardNumber(),
usci: Fakery.usci(),
};
}
// 更新卡片
function updateCard(fakery) {
let box = document.querySelector(".fakery-box");
let fakeryList = box.querySelectorAll(".fakery-item");
let fakeryKeys = Object.keys(fakery);
let zh = {
name: "姓名",
phone: "手机号码",
idCard: "身份证号码",
backCard: "社会统一信用代码",
usci: "工商银行卡号码",
};
for (let i = 0; i < fakeryList.length; i++) {
const fakeryItem = fakeryList.item(i);
const fakeryKey = fakeryKeys[i];
const fakeryLabel = fakeryItem.querySelector(".fakery-label");
const fakeryValue = fakeryItem.querySelector(".fakery-value");
fakeryValue.onclick = copyToClipboard;
fakeryLabel.textContent = zh[fakeryKey];
fakeryValue.textContent = fakery[fakeryKey];
}
}

createFakeryGroup()
</script>
</body>
/**
* 复制到剪贴板
*/
function copyToClipboard(e) {
let input =
document.querySelector(".copy-input") ||
document.createElement("input");
input.className = "copy-input";
input.value = e.target.textContent;
input.style = `position: fixed;top: -100%;`;
document.body.append(input);
input.select();
document.execCommand("copy");
e.target.classList.add("active");
setTimeout(() => {
e.target.classList.remove("active");
}, 1000);
}

</html>
const againBtn = document.querySelector(".again");
againBtn.onclick = () => {
updateCard(createFakeryGroup());
};
againBtn.click();
</script>
</body>
</html>
95 changes: 95 additions & 0 deletions 077.3D卡片鼠标跟随旋转动效.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!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" />
<link rel="stylesheet" href="./assets/global.css" />

<style>
body {
overflow: hidden;
}
.card {
position: relative;
top: 100px;
left: calc(100vw - 600px);
width: 600px;
height: 832px;

transform-style: preserve-3d;
perspective: 800px;
transform: rotateX(0) rotateY(0) rotateZ(20deg);
}

.card-content {
overflow: hidden;
border-radius: 12px;
display: flex;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.5);
transition: all 0.1s;
}

.card-content img {
width: 100%;
height: 100%;
}

h1 {
pointer-events: none;
font-size: 80px;
position: absolute;
color: rgb(168, 20, 20);
-webkit-text-stroke: 2px goldenrod;
z-index: 1;
padding-left: 2em;
transform: translateX(-50%);
top: 200px;
left: 50%;
width: 100%;
}
</style>
</head>

<body>
<h1>3D卡片鼠标跟随旋转动效</h1>
<div class="card">
<div class="card-content">
<img src="./assets/movie-poster/m-gnh.jpg" />
</div>
</div>
<script type="module">
// 初始偏移
const initOffsetRotateX = 10;
const initOffsetRotateY = -20;
const cardContentDom = document.querySelector(".card-content");
// 初始化
requestAnimationFrame(function () {
cardContentDom.style.transform = `rotateX(${initOffsetRotateX}deg) rotateY(${initOffsetRotateY}deg)`;
});
// 偏移
cardContentDom.addEventListener("mousemove", (e) => {
requestAnimationFrame(function () {
let rect = cardContentDom.getBoundingClientRect();
let x = e.clientX;
let y = e.clientY;
// 鼠标位置 - 卡片中心点 / 偏移量
let rotateX = (y - rect.y - rect.height / 2) / 60;
let rotateY = ((x - rect.x - rect.width / 2) / 60) * -1;

// 给偏移值加上初始偏移
rotateX += initOffsetRotateX;
rotateY += initOffsetRotateY;

cardContentDom.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
});
// 复位
cardContentDom.addEventListener("mouseleave", (e) => {
requestAnimationFrame(function () {
cardContentDom.style.transform = `rotateX(${initOffsetRotateX}deg) rotateY(${initOffsetRotateY}deg)`;
});
});
</script>
</body>
</html>

0 comments on commit d0d5638

Please sign in to comment.