ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำเอฟเฟกต์ Origami ของเมนู HTML5 ซึ่งคล้ายกับคำแนะนำของผู้ใช้เมื่อติดตั้งเบราว์เซอร์เสือชีต้า เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
คล้ายกับคำแนะนำของผู้ใช้เมื่อติดตั้งเบราว์เซอร์เสือชีต้า
เอฟเฟกต์หลังคลิก<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> เอฟเฟกต์กระดาษพับโดย gt-ke leyi </title>
<style>
#wrapper {
-webkit-Perspective: 55 ซม.;
-Webkit-Perspective-Origin: 50% 50%;
TEXT-ALIGN: CENTER;
-
.กระดาษ {
ตำแหน่ง: ญาติ;
ความสูง: 40px;
ความกว้าง: 5em;
มาร์จิ้น: 0;
พื้นหลังสี: Aqua;
-webkit-transition: -webkit-transform 1S linear;
-
</style>
<script type = "text/javascript">
window.angel = 0;
Window.timer;
โฟลเดอร์ฟังก์ชัน () {
var foldup = document.getElementById ("foldup");
var folddown = document.getElementById ("folddown");
var down = document.getElementById ("ลง");
if (window.angel == 0) {
window.timer = setInterval (ฟังก์ชัน () {
var diff = ต่างกัน (-1, 20);
console.log (foldup.offsettop)
ย้าย (foldup, diff, 1);
ย้าย (พับได้, diff, 3);
ย้าย (ลง, 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)";
} อื่นถ้า (angel == -90) {
window.timer = setInterval (ฟังก์ชัน () {
var diff = ต่างกัน (1, 20);
console.log (foldup.offsettop)
ย้าย (foldup, diff, 1);
ย้าย (พับได้, diff, 3);
ย้าย (ลง, 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)";
} อื่น {
console.log (window.angel)
-
-
ฟังก์ชั่น positionValue (div, type) {// รับค่าด้วยหน่วยของ CSS
var str = div.style [ประเภท];
str = str.substring (0, str.length - 2);
var value = parseint (str);
if (isnan (value)) {
ค่า = 0;
-
ค่าส่งคืน;
-
ฟังก์ชั่นย้าย (div, แตกต่างเวลา) {
var top = positionValue (div, "top");
div.style.top = top + ที่แตกต่าง * เวลา + "px";
-
ฟังก์ชั่นที่แตกต่าง (ทิศทางความสูง) {
var lastangel = window.angel;
window.angel += 3.6 * ทิศทาง;
var diffister = math
.CEIL ((math.cos (window.angel / 180 * math.pi) - คณิตศาสตร์
.COS (LastAngel / 180 * Math.pi)))
* ความสูง * 100) / 100;
กลับมาแตกต่างกัน;
-
</script>
</head>
<body>
<div>
<div>
ก
</div>
<div>
n
</div>
<div>
ข
</div>
<div>
T
</div>
</div>
<ปุ่ม onclick = fold ();>
พับ
</kout>
</body>
</html>