รูปภาพลอยน้ำ [เอฟเฟกต์พิเศษของหน้าเว็บ]

<style type="text/css"> .mainDiv { ความกว้าง:160px; } .topItem { ความกว้าง:160px; ความสูง:22px; เคอร์เซอร์:ตัวชี้; พื้นหลัง: #467BF2; การตกแต่งข้อความ: ไม่มี; สี: ขาว; แบบอักษรน้ำหนัก: ตัวหนา; ตระกูลแบบอักษร:"GOTHIC"; } .dropMenu { พื้นหลัง:#D9D9D9; ขอบบน:1px ทึบ #467BF2; ขอบซ้าย:1px ทึบ #92B1F8; เส้นขอบขวา:1px ทึบ #92B1F8; ขอบล่าง:1px ทึบ #92B1F8; } .subMenu { จอแสดงผล: ไม่มี; } .subItem { ช่องว่างภายในซ้าย: 5px; เคอร์เซอร์:ตัวชี้; แบบอักษรน้ำหนัก: ตัวหนา; การตกแต่งข้อความ: ไม่มี; สี:สีดำ; } .subItem { การตกแต่งข้อความ: ไม่มี; สี:สีดำ; } .subItemOver { เคอร์เซอร์:ตัวชี้; สี:สีฟ้า; การตกแต่งข้อความ:ขีดเส้นใต้; แบบอักษรน้ำหนัก: ตัวหนา; ช่องว่างภายในซ้าย: 5px; } .subItemOver a { สี: สีฟ้า; } .drop { เส้นขอบซ้าย: 1px สีดำทึบ; เส้นขอบขวา: 1px สีดำทึบ; } </style> <script language="JavaScript"> var TIMER_SLIDE = null; วาร์ OBJ_SLIDE; วาร์ OBJ_VIEW; var PIX_SLIDE = 10; //นี่คือจำนวนสไลด์/DELAY_SLIDE var NEW_PIX_VAL; คือ DELAY_SLIDE = 30; // นี่คือเวลาระหว่างการโทรแต่ละครั้งเพื่อเลื่อน var DIV_HEIGHT = 22; //ค่าไม่เกี่ยวข้อง var SUB_MENU_NUM =0; วาร์ RE_INIT_OBJ = โมฆะ; var bMenu = document.getElementById("curMenu"); var MainDiv, SubDiv //DD เพิ่มโค้ด document.write('<div id="tempcontainer" class="mainDiv" style="visibility:hidden; position: Absolute"></div>') ฟังก์ชั่น Init(objDiv) { ถ้า (TIMER_SLIDE == null) { SUB_MENU_NUM = 0; MainDiv = objDiv.parentNode; SubDiv = MainDiv.getElementsByTagName("DIV").item(0); SubDiv.onclick = SetSlide; OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1) OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0); document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD เพิ่มโค้ด DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD เพิ่มโค้ดสำหรับ ( i=0;i<OBJ_VIEW.childNodes.length;i++) { ถ้า (OBJ_VIEW.childNodes.item(i).tagName == "SPAN") { SUB_MENU_NUM ++; OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle; OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle; } } NEW_PIX_VAL = parseInt(MainDiv.getAttribute("สถานะ")); } } ฟังก์ชั่น SetSlide() { if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) //DD เพิ่มโค้ด if (TIMER_SLIDE == null && this.parentNode == MainDiv) TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); อื่น { RE_INIT_OBJ = นี่; setTimeout('เริ่มใหม่()', 200); } } ฟังก์ชั่น เริ่มต้นใหม่(obj) { เริ่มต้น(RE_INIT_OBJ); TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE); RE_INIT_OBJ = โมฆะ; } ฟังก์ชัน RunSlide() { ถ้า (OBJ_VIEW.getAttribute("state") == 0) { NEW_PIX_VAL += PIX_SLIDE; OBJ_SLIDE.style.height = NEW_PIX_VAL; ถ้า (NEW_PIX_VAL >= DIV_HEIGHT) //DD รหัสที่แก้ไข { clearInterval(TIMER_SLIDE); TIMER_SLIDE = โมฆะ; OBJ_VIEW.style.display = 'อินไลน์'; OBJ_VIEW.setAttribute("state","1") MainDiv.setAttribute("state",NEW_PIX_VAL); } } อื่น ๆ { OBJ_VIEW.style.display = 'none'; NEW_PIX_VAL -= PIX_SLIDE; ถ้า (NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL; ถ้า (NEW_PIX_VAL <= 0) { NEW_PIX_VAL = 0; OBJ_SLIDE.style.height = NEW_PIX_VAL ช่วงเวลาที่ชัดเจน (TIMER_SLIDE); TIMER_SLIDE = โมฆะ; OBJ_VIEW.setAttribute("state","0") MainDiv.setAttribute("state",NEW_PIX_VAL); } } } ฟังก์ชัน ChangeStyle() { ถ้า (this.className == this.getAttribute("classOut")) this.className = this.getAttribute("classOver"); อย่างอื่น this.className = this.getAttribute("classOut"); } </script> <!--------เมนูเริ่ม---------> <div class="mainDiv" state="0"> <div class="topItem" classOut= "topItem" classOver = "topItemOver" onMouseOver = "Init (นี้);" >网页特效</div> <div class="dropMenu" > <div class="subMenu" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href= "http://www.downcodes.com/">รูปภาพรูปภาพ</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href=" http://www.downcodes.com/">鼠标事件</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http //www.downcodes.com/">时间日期</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http: //www.downcodes.com/">导航菜单</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http:/ /www.downcodes.com/">文字效果</a></span> </div> </div> </div> <!--------สิ้นสุดเมนู------- ---> <BR /> <!--------เมนูเริ่ม----------> <div class="mainDiv" state="0"> <div class="topItem " classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网络学院</div> <div class="dropMenu" > <div class="subMenu" state="0"> <span class ="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.downcodes.com/">网页制作</a></span><BR /> <span class= "subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.downcodes.com/">网络编程</a></span><BR /> <span class=" subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.downcodes.com/">ภาพยนต์</a></span> </div> </div> </ div> <!--------สิ้นสุดเมนู----------> <BR /> <!--------เมนูเริ่ม--------- -> <div class="mainDiv" state="0"> <div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >网站联盟</div> <คลาส div ="dropMenu" > <div class="subMenu" state="0"> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.downcodes.com /">网页设计</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.downcodes.com/ ">艺术创作</a></span><BR /> <span class="subItem" classOut="subItem" classOver="subItemOver"><a href="http://www.downcodes.com/" >电脑网络</a></span> </div> </div> </div> <!--------สิ้นสุดเมนู--------->