โค้ดเอฟเฟกต์พิเศษของเมนูแบบเลื่อนลงพร้อมเอฟเฟกต์ไล่ระดับสี [เอฟเฟกต์พิเศษของหน้าเว็บ]

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-20 15:45:50

เมื่อเลื่อนเมาส์ไปเหนือภาพขนาดย่อของผลิตภัณฑ์ รูปภาพขนาดใหญ่จะปรากฏขึ้น ซึ่งสามารถทำได้โดยการเขียนสองฟังก์ชันใน JS: ฟังก์ชันหนึ่งจะถูกเรียกเมื่อเลื่อนเมาส์ไปเหนือรูปภาพเพื่อแสดงเลเยอร์ที่ซ่อนอยู่และโหลดรูปภาพลงใน เลเยอร์; ฟังก์ชันอื่น ๆ เรียกว่าเมื่อเลื่อนเมาส์ออกจากรูปภาพ เนื้อหาของเลเยอร์จะถูกล้างและเลเยอร์จะถูกซ่อน เวลาใช้งานต้อง เปลี่ยน "this.src" เป็นที่อยู่ของรูปสินค้า

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>เอฟเฟกต์ข้อความแจ้งที่น่าสนใจของรูปภาพหลังตัวชี้เมาส์ downcodes.com</title> <script ภาษา = "javascript"> ฟังก์ชั่น showPic (sUrl) { var x, y; x = event.clientX; y = event.clientY; document.getElementById ("Layer1"). style.left = x; ").style.top = y; document.getElementById("Layer1").innerHTML = "<img src="" + sUrl + "">"; document.getElementById("Layer1").style.display = "block"; } ฟังก์ชั่น HiddenPic(){ document.getElementById("Layer1").innerHTML = ""; document.getElementById("Layer1").style.display = "none"; <body> <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div> <img src="/images/logo.gif" onmouseout=" HiddenPic( );" onmousemove="showPic(this.src);" /> <p></p> <img src="/img/200406301.jpg" onmouseout="hiddenPic();" onmousemove="showPic( this. src);" /> </body> </html>