วันนี้ฉันจะแบ่งปันตัวอย่างเล็ก ๆ น้อย ๆ ของการใช้แอนทิมเพื่อให้ได้เอฟเฟกต์การสลับแบบเลื่อน
ทุกคนรู้ว่า jQuery มีวิธีการบางอย่างเพื่อให้ได้เอฟเฟกต์การเลื่อน:
1.Slidedown ()
2. Slideup ()
3.Slidetoggle ()
อย่างไรก็ตามการเลื่อนด้านบนไม่สะดวกในการควบคุมทิศทางของการเลื่อนดังนั้นเรามาเขียนด้วยตัวเอง - -
รหัสมีดังนี้:
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge, chrome = 1"> <title> ร่างกาย {ความกว้าง: 100%; ความสูง: อัตโนมัติ; } .Content {Width: 150px; ความสูง: 50px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 20px; ซ้าย: 20px; ล้น: ซ่อน; พื้นหลังสี: สีแดง; } .Slide-Box {Width: 300px; ตำแหน่ง: ญาติ; } .Slide1 {width: 150px; ความสูง: 50px; ลอย: ซ้าย; แสดง: Inline-Block; ระดับความสูง: 50px; TEXT-ALIGN: CENTER; พื้นหลังสี: #bdd8cf; } .Slide2 {Width: 150px; ความสูง: 50px; ลอย: ขวา; แสดง: Inline-Block; ระดับความสูง: 50px; TEXT-ALIGN: CENTER; พื้นหลังสี: #C1C4C4; } </style> </head> <body> <div> <div> <span> องค์ประกอบทางด้านซ้าย </span> <span> องค์ประกอบทางด้านขวา </span> </div> </div> <script src = "js/jQuery-1.11.2.min.js" type = "type type/javaScript $ (". content"). Hover (function () {$ ("Slide-box"). หยุด (จริง). เปิด ({ขวา: "150px"}, 'slow');}, function () {$ ("Slide-box").รหัสข้างต้นสามารถบรรลุเอฟเฟกต์การเลื่อนที่สมบูรณ์ แต่สิ่งหนึ่งที่ควรทราบ
ดังที่แสดงในรูปด้านบนจะต้องเพิ่มเหตุการณ์ Stop () เพื่อป้องกันหลายเหตุการณ์ที่เกิดขึ้นเมื่อเมาส์เคลื่อนที่อย่างรวดเร็วสร้างทีมสแต็กทำให้เกิดผลของการเลื่อนหรือกระพริบหลังจากที่เมาส์ถูกลบออก
บทความข้างต้นเคลื่อนไหวตระหนักถึงเอฟเฟกต์การสลับแบบเลื่อน [รหัสตัวอย่าง] เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น