Comentario: Este artículo presenta principalmente el efecto de origami del menú HTML5, similar a las instrucciones del usuario al instalar el navegador Cheetah. Amigos que lo necesitan pueden referirse a él
Similar a las instrucciones del usuario al instalar el navegador Cheetah.
Efecto después de hacer clic<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Fold Paper Effect de GT-Ke Leyi </title>
<estilo>
#wrapper {
-WebKit-Perspectiva: 55 cm;
-WebKit-Perspective-Origin: 50% 50%;
Text-Align: Center;
}
.papel {
Posición: relativo;
Altura: 40px;
Ancho: 5em;
margen: 0;
Color de fondo: Aqua;
-WebKit-Transition: -webkit-transform 1s lineal;
}
</style>
<script type = "text/javaScript">
Window.angel = 0;
Window.timer;
carpeta de funciones () {
var foldUp = document.getElementById ("Doblep");
var folddown = document.getElementById ("Folddown");
var down = document.getElementById ("Down");
if (window.angel == 0) {
window.timer = setInterval (function () {
var diff = diferente (-1, 20);
console.log (Foldup.offsettop)
mover (plegable, diff, 1);
mover (pliegue, diff, 3);
moverse (hacia abajo, 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 = diferente (1, 20);
console.log (Foldup.offsettop)
mover (plegable, diff, 1);
mover (pliegue, diff, 3);
moverse (hacia abajo, 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)";
} demás {
console.log (Window.angel)
}
}
función posicionValue (div, type) {// Obtener el valor con la unidad de CSS
var str = div.style [type];
str = str.substring (0, str.length - 2);
valor var = parseInt (str);
if (isnan (valor)) {
valor = 0;
}
valor de retorno;
}
Función Move (div, diferente, tiempo) {
var top = posicionValue (div, "top");
div.style.top = top + diferente * tiempo + "px";
}
función diferente (dirección, altura) {
var lastangel = window.angel;
Window.angel += 3.6 * Dirección;
var diferente = matemáticas
.ceil ((Math.cos (Window.angel / 180 * Math.pi) - Matemáticas
.cos (LastAngel / 180 * Math.pi))
* altura * 100) / 100;
devolver diferente;
}
</script>
</ablo>
<Body>
<div>
<div>
gramo
</div>
<div>
norte
</div>
<div>
b
</div>
<div>
T
</div>
</div>
<botón onClick = fold ();>
doblar
</botón>
</body>
</html>