บทความนี้อธิบายถึงผลกระทบของ JS เพื่อให้ได้เอฟเฟกต์การสลับภาพเคลื่อนไหวของมู่ลี่เว็บแนวตั้งสีเขียวและสีขาว แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
เราอธิบายเอฟเฟกต์ภาพเคลื่อนไหวของการสลับเว็บเบลนด์ แต่มันเป็นคนตาบอดแนวนอน นี่คือคนตาบอดแนวตั้ง รหัสนั้นเหมือนกัน:
คัดลอกรหัสดังนี้: <html>
<head>
<title> เอฟเฟกต์การสลับหน้าบด </title>
<style>
-
.intro {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 0;
ชั้นหลังพื้นดิน: สีเขียว;
พื้นหลังสี: สีเขียว;
เส้นขอบ: 0.1px Solid Green
-
-
</style>
</head>
<body>
<div id = "i1"> </div> <div id = "i2"> </div> <div id = "i3"
class = "intro"> </div> <div id = "i4"> </div> <div id = "i5"> </div> <div> <div
id = "i6"> </div> <div id = "i7"> </div> <div id = "i8"> </div>
<ภาษาสคริปต์ = "JavaScript1.2">
var speed = 20
var temp = อาร์เรย์ใหม่ ()
var temp2 = อาร์เรย์ใหม่ ()
if (document.layers) {
สำหรับ (i = 1; i <= 8; i ++) {
Temp [i] = eval ("document.i"+i+". clip")
temp2 [i] = eval ("document.i"+i)
temp [i] .width = window.innerWidth/8-0.3
temp [i] .height = window.innerHeight
temp2 [i] .left = (i-1)*temp [i] .width
-
-
อื่นถ้า (document.all) {
var clipbottom = document.body.offsetheight, cliptop = 0
สำหรับ (i = 1; i <= 8; i ++) {
temp [i] = eval
temp [i] .width = document.body.clientwidth/8
temp [i] .height = document.body.offsetheight
temp [i] .left = (i-1)*parseint (temp [i] .width)
-
-
ฟังก์ชั่น openit () {
window.scrollto (0,0)
if (document.layers) {
สำหรับ (i = 1; i <= 8; i = i+2)
temp [i] .bottom- = ความเร็ว
สำหรับ (i = 2; i <= 8; i = i+2)
temp [i] .top+= ความเร็ว
if (temp [2] .top> window.innerHeight)
ClearInterval (หยุด)
-
อื่นถ้า (document.all) {
Clipbottom- = ความเร็ว
สำหรับ (i = 1; i <= 8; i = i+2) {
temp [i] .clip = "rect (0 auto+"+clipbottom+"0)"
-
CLIPTOP+= ความเร็ว
สำหรับ (i = 2; i <= 8; i = i+2) {
temp [i] .clip = "rect ("+cliptop+"auto auto)"
-
if (clipbottom <= 0)
ClearInterval (หยุด)
-
-
ฟังก์ชั่น gogo () {
StopIt = SetInterval ("OpenIt ()", 100)
-
Gogo ()
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน