댓글 :이 기사는 주로 치타 브라우저를 설치할 때 사용자의 지침과 유사한 HTML5 메뉴의 종이 접기 효과를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다
치타 브라우저를 설치할 때 사용자의 지침과 유사합니다.
클릭 후 효과<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8">
<title> gt-ke Leyi의 종이 효과 </title>
<스타일>
#wrapper {
-webkit-perspective : 55cm;
-webkit-persecip-Origin : 50% 50%;
텍스트 정렬 : 센터;
}
.종이 {
위치 : 상대;
높이 : 40px;
너비 : 5em;
여백 : 0;
배경색 : 아쿠아;
-webkit-transition : -webkit-transform 1s 선형;
}
</스타일>
<script type = "text/javaScript">
Window.angel = 0;
Window.Timer;
함수 폴더 () {
var foldup = document.getElementById ( "폴드");
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);
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 = 다른 (1, 20);
Console.log (Foldup.offsetTop)
이동 (폴드, diff, 1);
이동 (폴드 다운, diff, 3);
이동 (아래, 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)";
} 또 다른 {
Console.log (Window.angel)
}
}
function value (div, type) {// CSS의 단위로 값을 얻습니다.
var str = div. 스타일 [유형];
str = str.substring (0, str.length -2);
var value = parseint (str);
if (isnan (value)) {
값 = 0;
}
반환 값;
}
함수 이동 (div, mifferent, time) {
var top = positionValue (div, "top");
div.style.top = top + different * time + "px";
}
기능 다르게 (방향, 높이) {
var rastangel = Window.angel;
Window.angel += 3.6 * 방향;
var differ = 수학
.ceil ((math.cos (Window.angel / 180 * Math.pi) - 수학
.COS (rastangel / 180 * math.pi))
* 높이 * 100) / 100;
다른 반환;
}
</스크립트>
</head>
<body>
<div>
<div>
g
</div>
<div>
N
</div>
<div>
비
</div>
<div>
티
</div>
</div>
<버튼 onclick = fold ();>
겹
</버튼>
</body>
</html>