Comentário: Este artigo apresenta principalmente o efeito de origami do menu HTML5, semelhante às instruções do usuário ao instalar o navegador Cheetah. Amigos que precisam
Semelhante às instruções do usuário ao instalar o navegador Cheetah.
Efeito após clique<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> dobrar o efeito do papel por gt-ke leyi </ititle>
<estilo>
#wrapper {
-Webkit-Perspective: 55cm;
-Webkit-Perspective-Origin: 50% 50%;
Alinhamento de texto: centro;
}
.papel {
Posição: relativa;
Altura: 40px;
largura: 5em;
margem: 0;
Background-Color: Aqua;
-Webkit-transição: -webkit-transform 1s linear;
}
</style>
<script type = "text/javascript">
window.Angel = 0;
window.timer;
Função pasta () {
var FOLTUP = document.getElementById ("Foldup");
var dobrown = 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 (dobrar, diff, 1);
mover (dobra, diff, 3);
mover (para baixo, diff, 4);
}, 40);
setTimeout (function () {
ClearInterval (Window.timer);
dobrap.style.top = "-20px";
dobrawl.style.top = "-60px";
Down.style.top = "-80px";
window.Angel = -90;
}, 1030);
FOLTUP.STYLE.WebkitTransform = "Rotatex (-90Deg)";
FOLDDOWN.style.webkittransform = "giratex (90deg)";
} else if (angel == -90) {
window.timer = setInterval (function () {
var diff = diferente (1, 20);
console.log (Foldup.offsetTop)
mover (dobrar, diff, 1);
mover (dobra, diff, 3);
mover (para baixo, diff, 4);
}, 40);
setTimeout (function () {
ClearInterval (Window.timer);
dobrap.style.top = "0";
dobrawl.style.top = "0";
Down.style.top = "0";
window.Angel = 0;
}, 1030);
FOLTUP.STYLE.WebkitTransform = "Rotatex (0DEG)";
FOLDDOWN.STYLE.WebkitTransform = "Rotatex (0DEG)";
} outro {
console.log (Window.Angel)
}
}
função positionValue (div, type) {// Obtenha o valor com a unidade de CSS
var str = div.style [tipo];
str = str.substring (0, str.length - 2);
var valor = parseint (str);
if (isnan (valor)) {
valor = 0;
}
valor de retorno;
}
função move (div, diferente, tempo) {
var top = positionValue (div, "top");
div.style.top = topo + diferente * tempo + "px";
}
função diferente (direção, altura) {
var lobrangel = window.Angel;
Window.Angel += 3,6 * direção;
var diferente = matemática
.CEIL ((MATH.COS (Window.Angel / 180 * Math.PI) - Math
.Cos (Lobrangel / 180 * Math.PI))
* altura * 100) / 100;
retornar diferente;
}
</script>
</head>
<Body>
<div>
<div>
g
</div>
<div>
n
</div>
<div>
b
</div>
<div>
t
</div>
</div>
<botão onclick = dobra ();>
dobrar
</button>
</body>
</html>