Komentar: Artikel ini terutama memperkenalkan efek origami dari menu HTML5, mirip dengan instruksi pengguna saat menginstal browser Cheetah. Teman yang membutuhkannya bisa merujuknya
Mirip dengan instruksi pengguna saat menginstal browser Cheetah.
Efek setelah klik<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8">
<Title> Efek kertas lipat oleh gt-ke leyi </iteme>
<tyle>
#wrapper {
-webkit-perspektif: 55cm;
-webkit-perspektif-asal: 50% 50%;
Teks-Align: tengah;
}
.kertas {
Posisi: kerabat;
Tinggi: 40px;
Lebar: 5em;
Margin: 0;
Latar Belakang-Color: Aqua;
-webkit-transisi: -webkit-transform 1s linear;
}
</tyle>
<type skrip = "Teks/JavaScript">
window.angel = 0;
window.timer;
folder fungsi () {
var foldup = document.getElementById ("foldup");
var lipatan = document.getElementById ("lipatan");
var down = document.geteLementById ("down");
if (window.angel == 0) {
window.timer = setInterval (function () {
var diff = berbeda (-1, 20);
Console.log (Foldup.offsettop)
pindahkan (lipatan, diff, 1);
pindahkan (lipatan, diff, 3);
bergerak (turun, diff, 4);
}, 40);
setTimeout (function () {
clearInterval (window.timer);
foldup.style.top = "-20px";
folddown.style.top = "-60px";
down.style.top = "-80px";
window.angel = -90;
}, 1030);
foldup.style.webkittransform = "rotatex (-90deg)";
folddown.style.webkittransform = "rotatex (90deg)";
} else if (angel == -90) {
window.timer = setInterval (function () {
var diff = berbeda (1, 20);
Console.log (Foldup.offsettop)
pindahkan (lipatan, diff, 1);
pindahkan (lipatan, diff, 3);
bergerak (turun, diff, 4);
}, 40);
setTimeout (function () {
clearInterval (window.timer);
foldup.style.top = "0";
folddown.style.top = "0";
down.style.top = "0";
window.angel = 0;
}, 1030);
foldup.style.webkittransform = "rotatex (0deg)";
folddown.style.webkittransform = "rotatex (0deg)";
} kalau tidak {
console.log (window.angel)
}
}
function positionValue (div, type) {// Dapatkan nilainya dengan unit CSS
var str = div.style [type];
str = str.substring (0, str.length - 2);
var value = parseInt (str);
if (isnan (value)) {
nilai = 0;
}
nilai pengembalian;
}
function move (div, berbeda, waktu) {
var top = positionValue (div, "top");
div.style.top = top + waktu yang berbeda * + "px";
}
fungsi berbeda (arah, tinggi) {
var lastangel = window.angel;
window.angel += 3.6 * arah;
var berbeda = matematika
.ceil ((Math.cos (window.angel / 180 * math.pi) - matematika
.cos (lastangel / 180 * math.pi))
* Tinggi * 100) / 100;
kembali berbeda;
}
</script>
</head>
<body>
<div>
<div>
G
</div>
<div>
N
</div>
<div>
B
</div>
<div>
T
</div>
</div>
<tombol OnClick = fold ();>
melipat
</tombol>
</body>
</html>