บทความนี้อธิบายถึงวิธีการสลับเอฟเฟกต์ภาพเคลื่อนไหวของหน้าเว็บเอฟเฟกต์เอฟเฟกต์ในแนวนอนใน JS แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
นี่เป็นเอฟเฟกต์การสลับหน้าเว็บที่ง่ายมาก แต่ดี หลังจากคลิกที่หน้าเว็บใหม่หน้าเว็บจะสลับระหว่างมู่ลี่สีน้ำเงินและสีขาวโดยอัตโนมัติจนกว่าหน้าเว็บทั้งหมดจะปรากฏขึ้นอย่างสมบูรณ์ รหัสมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> js web blinds เอฟเฟกต์การสลับแบบไดนามิก </title>
<style>
-
.intro {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0;
ด้านบน: 0;
ชั้นหลังพื้น-สี: สีน้ำเงิน;
พื้นหลังสี: สีน้ำเงิน;
เส้นขอบ: 0.1px ของแข็งสีน้ำเงิน
-
-
</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
temp [i] .height = window.innerHeight/8
temp2 [i] .top = (i-1)*temp [i] .height
-
-
อื่นถ้า (document.all) {
var clipright = document.body.clientwidth, clift = 0
สำหรับ (i = 1; i <= 8; i ++) {
temp [i] = eval
temp [i] .width = document.body.clientwidth
temp [i] .height = document.body.offsetheight/8
temp [i] .top = (i-1)*parseint (temp [i] .Height)
-
-
ฟังก์ชั่น openit () {
window.scrollto (0,0)
if (document.layers) {
สำหรับ (i = 1; i <= 8; i = i+2)
temp [i]. right- = ความเร็ว
สำหรับ (i = 2; i <= 8; i = i+2)
Temp [i] .left+= ความเร็ว
if (temp [2] .left> window.innerWidth)
ClearInterval (หยุด)
-
อื่นถ้า (document.all) {
Clipright- = ความเร็ว
สำหรับ (i = 1; i <= 8; i = i+2) {
temp [i] .clip = "rect (0"+clipright+"auto 0)"
-
clipleft+= ความเร็ว
สำหรับ (i = 2; i <= 8; i = i+2) {
temp [i] .clip = "rect (0 auto auto"+clipleft+")"
-
if (clipright <= 0)
ClearInterval (หยุด)
-
-
ฟังก์ชั่น gogo () {
StopIt = SetInterval ("OpenIt ()", 100)
-
Gogo ()
</script>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน