تعليق: يقدم هذا المقال بشكل أساسي تأثير اوريغامي لقائمة HTML5 ، على غرار تعليمات المستخدم عند تثبيت متصفح Cheetah. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها
على غرار تعليمات المستخدم عند تثبيت متصفح الفهد.
التأثير بعد النقر<! doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<title> تأثير الورق بواسطة GT-KE LEYI </title>
<style>
#wrapper {
-webkit-perspective: 55 سم ؛
-webkit-perseptor-arigin: 50 ٪ 50 ٪ ؛
محاذاة النص: المركز ؛
}
.ورق {
الموقف: قريب
الارتفاع: 40 بكسل ؛
العرض: 5em ؛
الهامش: 0 ؛
لون الخلفية: أكوا ؛
-Webkit-transition: -webkit-transform 1S Linear ؛
}
</style>
<script type = "text/javaScript">
window.angel = 0 ؛
Window.timer ؛
مجلد الوظيفة () {
var foldup = document.getElementById ("foldup") ؛
var lovowdown = document.getElementById ("lovdown") ؛
var down = document.getElementById ("down") ؛
if (window.angel == 0) {
window.timer = setInterval (function () {
var diff = مختلف (-1 ، 20) ؛
console.log (foldup.offsettop)
تحرك (foldup ، diff ، 1) ؛
تحرك (طية ، diff ، 3) ؛
تحرك (لأسفل ، فرق ، 4) ؛
} ، 40) ؛
setTimeout (function () {
ClearInterval (window.timer) ؛
foldup.style.top = "-20px" ؛
lovowdown.style.top = "-60px" ؛
down.style.top = "-80px" ؛
window.angel = -90 ؛
} ، 1030) ؛
foldup.style.webkittransform = "rotatex (-90deg)" ؛
lovDown.Style.WebKitTransform = "Rotatex (90deg)" ؛
} آخر إذا (angel == -90) {
window.timer = setInterval (function () {
var diff = مختلف (1 ، 20) ؛
console.log (foldup.offsettop)
تحرك (foldup ، diff ، 1) ؛
تحرك (طية ، diff ، 3) ؛
تحرك (لأسفل ، فرق ، 4) ؛
} ، 40) ؛
setTimeout (function () {
ClearInterval (window.timer) ؛
foldup.style.top = "0" ؛
lovown.style.top = "0" ؛
down.style.top = "0" ؛
window.angel = 0 ؛
} ، 1030) ؛
foldup.style.webkittransform = "Rotatex (0deg)" ؛
lovown.style.webkittransform = "rotatex (0deg)" ؛
} آخر {
console.log (window.angel)
}
}
وظيفة الموضع (div ، اكتب) {// احصل على القيمة مع وحدة 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 + مختلف * time + "px" ؛
}
وظيفة مختلفة (الاتجاه ، الارتفاع) {
var lastangel = window.angel ؛
window.angel += 3.6 * الاتجاه ؛
var مختلف = الرياضيات
.ceil ((Math.cos (window.angel / 180 * Math.PI) - Math
.cos (Lastangel / 180 * Math.PI))
* الارتفاع * 100) / 100 ؛
العودة مختلفة.
}
</script>
</head>
<body>
<viv>
<viv>
ز
</div>
<viv>
ن
</div>
<viv>
ب
</div>
<viv>
ر
</div>
</div>
<زر OnClick = fold () ؛>
طية
</button>
</body>
</html>