Kommentar: In diesem Artikel wird hauptsächlich den Origami -Effekt des HTML5 -Menüs vorgestellt, ähnlich wie die Anweisungen des Benutzers bei der Installation des Gepardenbrowsers. Freunde, die es brauchen, können sich darauf beziehen
Ähnlich wie bei den Anweisungen des Benutzers bei der Installation des Cheetah -Browsers.
Effekt nach dem Klick<! DocType html>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<title> Fold-Papier-Effekt von gt-ke Leyi </title>
<Styles>
#Wrapper {
-Webkit-Perspektive: 55 cm;
-Webkit-Perspektive-Origin: 50% 50%;
Text-Align: Mitte;
}
.Papier {
Position: Relativ;
Höhe: 40px;
Breite: 5EM;
Rand: 0;
Hintergrundfarbe: Aqua;
-Webkit-Übergang: -Webkit-Transformation 1S linear;
}
</style>
<script type = "text/javaScript">
Fenster.Angel = 0;
Fenster.Timer;
Funktion order () {
var oldup = document.getElementById ("faltup");
var folddown = document.getElementById ("folddown");
var down = document.getElementById ("down");
if (window.angel == 0) {
window.timer = setInterval (function () {
var diff = unterschiedlich (-1, 20);
console.log (faltup.offsettop)
verschieben (faltup, diff, 1);
verschieben (Folddown, Diff, 3);
bewegen (nach unten, diff, 4);
}, 40);
setTimeout (function () {
ClearInterval (Fenster.Timer);
faltup.style.top = "-20px";
folddown.style.top = "-60px";
Down.Style.top = "-80px";
Fenster.Angel = -90;
}, 1030);
faltup.style.webkittransform = "rotatex (-90de)";
folddown.style.webkittransform = "rotatex (90de)";
} else if (Angel == -90) {
window.timer = setInterval (function () {
var diff = unterschiedlich (1, 20);
console.log (faltup.offsettop)
verschieben (faltup, diff, 1);
verschieben (Folddown, Diff, 3);
bewegen (nach unten, diff, 4);
}, 40);
setTimeout (function () {
ClearInterval (Fenster.Timer);
faltup.Style.top = "0";
folddown.style.top = "0";
Down.Style.top = "0";
Fenster.Angel = 0;
}, 1030);
faltup.style.webkittransform = "rotatex (0deg)";
folddown.style.webkittransform = "rotatex (0deg)";
} anders {
console.log (window.angel)
}
}
FunktionspositionValue (Div, Typ) {// Erhalten Sie den Wert mit der Einheit von CSS
var str = div.Style [Typ];
str = str.substring (0, str. Length - 2);
var value = parseInt (str);
if (isnan (Wert)) {
Wert = 0;
}
Rückgabewert;
}
Funktionsbewegung (div, unterschiedlich, Zeit) {
var top = PositionValue (div, "top");
Div.Style.top = top + different * time + "px";
}
Funktion anders (Richtung, Höhe) {
var lastAngel = window.Angel;
Fenster.Angel += 3,6 * Richtung;
var anders = Mathematik
.
.cos (lastAngel / 180 * math.pi))
* Höhe * 100) / 100;
anders zurückkehren;
}
</script>
</head>
<body>
<div>
<div>
G
</div>
<div>
N
</div>
<div>
B
</div>
<div>
T
</div>
</div>
<Schaltfläche onclick = fold ();>
falten
</button>
</body>
</html>