Комментарий: Эта статья в основном представляет эффект оригами меню HTML5, аналогичный инструкциям пользователя при установке браузера Cheetah. Друзья, которые это нужно, могут ссылаться на это
Подобно инструкциям пользователя при установке браузера Cheetah.
Эффект после клика<! Doctype html>
<html>
<голова>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Title> Эффект сгибания бумаги от GT-Ke Leyi </title>
<style>
#wrapper {
-Вебкит-перспектива: 55 см;
-Вебкит-перспектива-аоригин: 50% 50%;
Текст-альбом: Центр;
}
.бумага {
позиция: относительно;
Высота: 40px;
Ширина: 5EM;
поля: 0;
фоновый цвет: аква;
-Вебкит-трансляция: -Webkit-transform 1s Linear;
}
</style>
<script type = "text/javascript">
window.angel = 0;
window.timer;
Функция folder () {
var FOLTUP = DOCUMT.GETELEMEMENTBYID ("FOLTUP");
var folddown = document.getElementById ("склад");
var down = document.getElementbyId ("down");
if (window.angel == 0) {
window.timer = setInterval (function () {
var diff = разные (-1, 20);
console.log (foldup.offsettop)
Переместить (склад, Diff, 1);
Перемещение (склад, Diff, 3);
двигаться (вниз, diff, 4);
}, 40);
settimeout (function () {
clearInterval (window.timer);
FOOKUP.STYLE.TOP = "-20PX";
FOLTDOWN.STYLE.TOP = "-60PX";
down.style.top = "-80px";
window.angel = -90;
}, 1030);
FOOKUP.STYLE.WEBKITTRANSFORM = "rotatex (-90Deg)";
folddown.style.webkittransform = "rotatex (90deg)";
} else if (angel == -90) {
window.timer = setInterval (function () {
var diff = другой (1, 20);
console.log (foldup.offsettop)
Переместить (склад, Diff, 1);
Перемещение (склад, Diff, 3);
двигаться (вниз, diff, 4);
}, 40);
settimeout (function () {
clearInterval (window.timer);
footup.style.top = "0";
FOLTDOWN.STYLE.TOP = "0";
down.style.top = "0";
window.angel = 0;
}, 1030);
FOOTUP.STYLE.WEBKITTRANSFORM = "rotatex (0DEG)";
folddown.style.webkittransform = "rotatex (0deg)";
} еще {
console.log (window.angel)
}
}
Функция PositionValue (div, type) {// Получить значение с единицей CSS
var str = div.style [type];
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 разные = математика
.ceil ((math.cos (window.angel / 180 * math.pi) - математика
.cos (lastangel / 180 * math.pi))
* высота * 100) / 100;
вернуть по -другому;
}
</script>
</head>
<тело>
<div>
<div>
глин
</div>
<div>
не
</div>
<div>
беременный
</div>
<div>
Т
</div>
</div>
<button onclick = fold ();>
складывать
</button>
</body>
</html>