Commentaire: Cet article présente principalement l'effet origami du menu HTML5, similaire aux instructions de l'utilisateur lors de l'installation du navigateur de guépard. Les amis qui en ont besoin peuvent y faire référence
Semblable aux instructions de l'utilisateur lors de l'installation du navigateur Cheetah.
Effet après le clic<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8">
<Title> Effet de papier plié par GT-Ke Leyi </Title>
<style>
#Wrapper {
-Webkit-Perspective: 55cm;
-Webkit-Perspective-Origin: 50% 50%;
Texte-aligne: Centre;
}
.papier {
Position: relative;
hauteur: 40px;
Largeur: 5EM;
marge: 0;
Color en arrière-plan: Aqua;
-Webkit-Transition: -Webkit-Transform 1s Linear;
}
</ style>
<script type = "text / javascript">
window.angel = 0;
window.timer;
dossier de fonction () {
var Foldup = document.getElementById ("Foldup");
var Foldown = Document.getElementById ("Foldown");
var down = document.getElementById ("down");
if (window.angel == 0) {
window.timer = setInterval (function () {
var diff = différent (-1, 20);
console.log (Foldup.offsetTop)
déplacer (plip, diff, 1);
déplacer (repliage, diff, 3);
déplacer (vers le bas, diff, 4);
}, 40);
setTimeout (function () {
ClearInterval (Window.Timer);
Foldup.style.top = "-20px";
Folldown.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 = différent (1, 20);
console.log (Foldup.offsetTop)
déplacer (plip, diff, 1);
déplacer (repliage, diff, 3);
déplacer (vers le bas, diff, 4);
}, 40);
setTimeout (function () {
ClearInterval (Window.Timer);
Foldup.style.top = "0";
Folldown.style.top = "0";
down.style.top = "0";
window.angel = 0;
}, 1030);
Foldup.style.webkitTransform = "Rotatex (0Deg)";
Folddown.Style.WebkitTransform = "Rotatex (0Deg)";
} autre {
console.log (Window.angel)
}
}
Fonction PositionValue (div, type) {// Obtenez la valeur avec l'unité de CSS
var str = div.style [type];
str = str.substring (0, str.length - 2);
VAR VALEUR = PARSEINT (STR);
if (isnan (valeur)) {
valeur = 0;
}
valeur de retour;
}
Fonction Move (div, différent, temps) {
var top = positionvalue (div, "top");
div.style.top = top + différent * temps + "px";
}
fonction différente (direction, hauteur) {
var Lastangel = window.angel;
Window.Angel + = 3,6 * Direction;
var différent = mathématiques
.ceil ((math.cos (window.angel / 180 * math.pi) - math
.Cos (Lastangel / 180 * Math.pi))
* hauteur * 100) / 100;
retourner différent;
}
</cript>
</ head>
<body>
<div>
<div>
g
</div>
<div>
n
</div>
<div>
b
</div>
<div>
t
</div>
</div>
<Button onClick = Fold ();>
pli
</ bouton>
</docy>
</html>