Tip: You can modify some of the code before running
<style type= "Text/css" > body {background: #333333;} #winpop {width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; Overflow:hidden;display:none; Background: #FFFFFF} #winpop. title {width:100%; height:20px; line-height:20px; background: #FFCC00; font-weight:bold; Text-align:center; font-size:12px;} #winpop. con {width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color: #FF0000; Text-decoration:underline; Text-align:center} #silu {font-size:13px; color: #999999; position:absolute; right:0;bottom:0px; text-align:right; Text-decoration:underline; line-height:22px;} . close {position:absolute; right:4px top:-1px; color: #FFFFFF; cursor:pointer} </style> <script type= "text/ JavaScript >//Display window function Show_pop () {document.getElementById ("winpop"). style.display= "Block"; Call Changeh (4) and move up timer=setinterval every 0.002 seconds ("Changeh (4)", 2); ///Hide Window function Hid_pop () {//Call CHangeh (-4), moving down once every 0.002 seconds Timer=setinterval ("Changeh (-4)", 2); }//Test through function Changeh (ADDH) {var msgpop = document.getElementById ("winpop"); Use parseint to convert the height of the object to numbers to facilitate comparison (JS read <style> height to use "currentstyle.height") var poph = parseint ( MsgPop.style.height | | MsgPop.currentStyle.height); If the height is less than or equal to (str>0) or the height is greater than or equal to 4 (str<0) if (poph <= && addh > 0 | | poph >= 4 && Addh & Lt 0) {//height increase or decrease of 4 pixel msgpop.style.height= (POPH+ADDH). toString () + "px"; else {//cancel the call, meaning that if the height exceeds 100 pixels, it no longer increases, or the height is equal to 0 pixels, no longer reduces the clearinterval (timer); window appears when moving up, window hidden MsgPop.style.display = ADDH > 0? "Block": "None"; } window.onload = function () {//0.8 seconds after calling Show_pop () settimeout ("Show_pop ()",);} </script> <body> <div id= "Silu" > <button onclick= "Show_pop ()" > Test button </button> </div> <div id= "winpop" > &L T;div class= "title" > You have newMessage <span class= "Close" onclick= "Hid_pop ()" >X</span></div> <div class= "con" > Free space. </div> </div> </body>
Tip: You can modify some of the code before running
