<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Slide Description text </title> <style type=" Text/css "media=" All "> slide_bg{border:# 999999 3px solid;width:207px;height:106px;position:relative;overflow:hidden;float:left;margin-right:16px; margin-top:26px;} . Slide_img{background-image:url (/jscss/demoimg/wall1.jpg); width:207px;height:106px;} . Slide_txt{width:197px;height:100px;background-color: #000000;p osition:absolute;top:106px;left:0px;color:# ffcc33;line-height:22px;padding:5px;font-size:12px;} </style> <script language= "javascript" type= "Text/javascript" > var slide_content=function () {var id= " Slide_content "//sliding picture parent container ID name var interval=10; Sliding speed var interval2=100; Text slip out delay time (MS) Var interval3=500; The delay time (milliseconds) of automatic disappearance of text content Var opacity=69;Text content layer Transparency var timer2=new Array (); var elem=new Array (); var status=new Array (); var Div=document.getelementbyid (ID). getElementsByTagName ("div"); var timer3=0; run_animation var d=function () {var timer,obj,txt;var ypos=100; This.run=function (Pra1,pra2,dir) {obj=pra1;txt=pra2;if (dir>0) {cleartimeout (timer); cleartimeout (TIMER3); Timer3=settimeout (OBJ.UP,INTERVAL2);} Else{cleartimeout (timer); Obj.down ()};txt.style.filter= "alpha (opacity=" +opacity+ ")"; txt.style.opacity=opacity/ 100;} Slide up this.up=function () {if (ypos<=0) {txt.style.top= "0px"}else{ypos-=10;txt.style.top=ypos+ "px"; timer= SetTimeout (Obj.up,interval)}}//Slide down this.down=function () {if (ypos>=106) {txt.style.top= "106px";} else{ypos+=15;txt.style.top=ypos+ ' px ' Timer=settimeout (obj.down,interval)}}//init Mouse_behavior for (Var i=0;i <div.length;i+=3) {div[i+1].index=div[i+2].index=i+2; Elem[i+2]=new d (); Div[i+1].onmouseover=function () {Elem[this.index].run (elem[this.index],div[this.index],1)}; Div[i+1].onmoUseout=function () {var n=this.index;if (status[n]!=1) {timer2[n]=settimeout (IMGOUT,INTERVAL3)};function imgout () { Elem[n].run (Elem[n],div[n],-1)}} div[i+2].onmouseout=function () {Elem[this.index].run (elem[this.index],div[ this.index],-1); status[this.index]=0} div[i+2].onmouseover=function () {cleartimeout (Timer2[this.index)); status[ This.index]=1}}//Web page loaded, start function window.onload=slide_content; </script> </pead> <body> <div id= "slide_content" > <div class= "slide_bg" > <div class= "Slide_img" ></div> <div class= "Slide_txt" > Spring:<br> Spring is the season of sowing. </div> </div> <div class= "SLIDE_BG" > <div class= "slide_img" ></div> <div class= "slide _txt "> Summer:<br> Summer is the hottest season. </div> </div> <div class= "SLIDE_BG" > <div class= "slide_img" ></div> <div class= "slide _txt "> Autumn:<br> Autumn is the harvest season. </div> </div> <div class= "SLIDE_BG" > <div class= "slide_img" ></div> <div class= "Slide_txt" > Winter is a shocking season for:<br> winter. </div> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
