ฉันได้ทำงานในโครงการในช่วงไม่กี่วันที่ผ่านมา มันกลับกลายเป็นว่าทำด้วยแอนิเมชั่น CSS3 เนื่องจากมันเข้ากันไม่ได้กับ IE จึงเปลี่ยนเป็น JS ฉันจะแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ หากมีข้อบกพร่องใด ๆ ในรหัสโปรดยกโทษให้ฉันที่ไม่เขียนดี!
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> type = "text/css">. w1000 {ตำแหน่ง: สัมพัทธ์; width: 1000px; margin: 0 auto;}. positionpub {ตำแหน่ง: Absolute;}. positionpub. P {width: 50px; ความสูง: 50px; พื้นหลัง:#333; สี: #FFFF; สายไฟ: 50PX; text-allign: center; ตำแหน่ง: สัมบูรณ์;}. ad_float {t OP: 50PX; ซ้าย: 50PX;}. AD_FLOAT1 {TOP: 150PX; ซ้าย: 250PX;}. AD_FLOAT2 {TOP: 250PX; ซ้าย: 450PX;} </style> </head> id = "ad_float"> ซ้าย </p> </div> <div> <p id = "ad_float1"> ขวา </p> </div> <div> <p id = "ad_float2"> ลง </p> </div> </div> <script type = "javascript"> var x = 0 2; var delay = 10; var obj = document.getElementById ("ad_float"); var obj1 = document.getElementById ("ad_float1"); var obj2 = document.getElementById ("ad_float2"); ฟังก์ชั่น ad_float (var l = 0; "px"; x = x + step * (xin? 1: -1); ถ้า (x <l) {xin = true; x = l;} ถ้า (x> r) {xin = false; x = r;}}; ฟังก์ชั่น ad_float1 () {var l1 = 0; var r1 = 100; "px"; x1 = x1 + step * (xin? 1: -1); ถ้า (x1 <l1) {xin = true; x1 = l1;} ถ้า (x1> r1) {xin = false; x1 = r1;}}; ฟังก์ชั่น ad_float2 () {var t = 0; var b = 150; document.documentelement.scrolltop + "px"; y = y + step2 * (หยิน? 1: -1); ถ้า (y <t) {yin = true; y = t;} ถ้า (y> b) {yin = false; y = b;}}; var itl = setInterval ล่าช้า); var itl2 = setInterval ("ad_float2 ()", ล่าช้า); </script> </body> </html>รหัสสิ้นสุดที่นี่ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!