CSS模拟制作的techweb网站导航特效代码

dn001 2009-06-21 08:55:02

<table width=360 height=160 cellpadding=0 cellspacing=0 border=0><tr><td> <SCRIPT> // more javascript from http://www.knowsky.com //////////////////////////////////////////////////////// // Set the values of you slideshow below this line var slideurl=new Array() // URLs of your slides (pictures). Add as many as you like slideurl[0]="/img/200406301.jpg" slideurl[1]="/img/200406302.jpg" slideurl[2]="/img/200406303.jpg" var slidecomment=new Array() // Comment for each picture slidecomment[0]="图片说明一" slidecomment[1]="图片说明二" slidecomment[2]="图片说明三" var slidelink=new Array() // Link for your slides slidelink[0]="http://www.knowsky.com" slidelink[1]="http://www.knowsky.com" slidelink[2]="http://www.knowsky.com" // Target for each slide-link var slidetarget=new Array() slidetarget[0]="_blank" slidetarget[1]="_top" slidetarget[2]="" // URL of the sound-file var slidesound="http://www.knowsky.com/upfiles/20050402/20050402011004_sound_swish.wav" // Font var slidefont="Arial" // Font-color var slidefontcolor="blue" // Font-size (acceptable values form 1 to 6) var slidefontsize=2 // Width slideshow (pixels) var slidewidth=360 // Height slideshow (pixels) var slideheight=160 //Pause between each slide (seconds) var pauseslide=3 // Do not edit the code below this line // ///////////////////////////////////////// var textposition="right_auto" var slidecontent var max_space=19 var space=" " var i_substring=0 var i_space=max_space var all_space=" " var content="" var pausefade=20 var i_slide=0 var i_filter=-1 var nextorprevious=1 var transparency=0 var transparencystep=5 var isloaded=false var started=false var stopshow=false var newpause=pauseslide var checkpause=200 var neximage="" var howmanycomplete=0 var preload_slides=-1 var pauseslide=pauseslide*1000 var browserinfos=navigator.userAgent var ie=document.all&&!browserinfos.match(/Opera/)?1:0 var ns6=document.getElementById&&!document.all?1:0 var ns4=document.layers?1:0 var op=browserinfos.match(/Opera/) var preloadedimages=new Array() for (i=0;i<slideurl.length;i++){ preloadedimages[i]=new Image() preloadedimages[i].src=slideurl[i] } function initslideshow4() { setimagetocache() getcontent() if (ie) { slidecontainer.innerHTML=slidecontent } if (ns6 || op) { transparency=100 document.getElementById('slidecontainer').innerHTML=slidecontent } var inittimer=setTimeout("checkifcached()",100) } function setimagetocache() { preload_slides++ if (preload_slides<=slideurl.length) { nextimage=new Image(); nextimage.src=slideurl[preload_slides]; checkautocached() } } function checkautocached() { if (nextimage.complete) { howmanycomplete++ setimagetocache() } else { var timer2=setTimeout("checkautocached()",checkpause); } } function stopslideshow() { stopshow=true } function playslideshow() { stopshow=false } function checkifcached() { if (i_slide<=howmanycomplete) { if (ie) { if (textposition=="top_auto" || textposition=="bottom_auto" || textposition=="left_auto" || textposition=="right_auto" || textposition=="top_auto_nocontrols" || textposition=="bottom_auto_nocontrols") { var nextimer=setTimeout("autoslide()",newpause) } if (textposition=="top_hand" || textposition=="bottom_hand" || textposition=="left_hand" || textposition=="right_hand") { if (started) { handslide() } started=true } } if (ns6 || op) { if (textposition=="top_auto" || textposition=="bottom_auto" || textposition=="left_auto" || textposition=="right_auto" || textposition=="top_auto_nocontrols" || textposition=="bottom_auto_nocontrols") { unfadeslide() } if (textposition=="top_hand" || textposition=="bottom_hand" || textposition=="left_hand" || textposition=="right_hand") { if (started) { fadeslidehand() } started=true } } } else { newpause=newpause-checkpause if (newpause<1200) {newpause=1200} var timer2=setTimeout("checkifcached()",checkpause); } } function getcontent() { if (textposition=="top_auto") { slidecontent="<font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a>" } else if (textposition=="bottom_auto") { slidecontent="<a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font>" } else if (textposition=="left_auto") { slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td align=right><a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td></tr></table>" } else if (textposition=="right_auto") { slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td><td><a href='javascript:stopslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>stop</font></a> <a href='javascript:playslideshow()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>play</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td></tr></table>" } else if (textposition=="top_auto_nocontrols") { slidecontent="<font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a>" } else if (textposition=="bottom_auto_nocontrols") { slidecontent="<a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font>" } else if (textposition=="top_hand") { slidecontent="<font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a>" } else if (textposition=="bottom_hand") { slidecontent="<a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a><br><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font>" } else if (textposition=="left_hand") { slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td align=right><a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td></tr></table>" } else if (textposition=="right_hand") { slidecontent="<table cellpadding=3 cellspacing=0 border=0><tr valign=top><td><a href='"+slidelink[i_slide]+"' target='"+slidetarget[i_slide]+"'><img name='slideimage' src='"+slideurl[i_slide]+"' border=0></a></td><td><a href='javascript:checkifcached()'><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>next</font></a><br><br><font face='"+slidefont+"' size='"+slidefontsize+"' color='"+slidefontcolor+"'>"+slidecomment[i_slide]+"</font></td></tr></table>" } } // more javascript from http://www.knowsky.com function unfadeslide() { if (transparency<100){ transparency+=transparencystep if (ns6) { document.getElementById('slidecontainer').style.MozOpacity=transparency/100 } var fadetimer=setTimeout("unfadeslide()",pausefade) } else { clearTimeout(fadetimer) var fadetimer=setTimeout("fadeslide()",newpause) } } function unfadeslidehand() { if (transparency<100){ transparency+=transparencystep if (ns6) { document.getElementById('slidecontainer').style.MozOpacity=transparency/100 } var fadetimer=setTimeout("unfadeslidehand()",pausefade) } else { clearTimeout(fadetimer) } } function fadeslide() { if (!stopshow) { if (transparency>0){ transparency-=transparencystep if (ns6) { document.getElementById('slidecontainer').style.MozOpacity=transparency/100 } var fadetimer=setTimeout("fadeslide()",pausefade) } else { var autotimer=setTimeout("autoslide()",200) } } else { var stoptimer=setTimeout("fadeslide()",500) } } function fadeslidehand() { if (transparency>0){ transparency-=transparencystep if (ns6) { document.getElementById('slidecontainer').style.MozOpacity=transparency/100 } var fadetimer=setTimeout("fadeslidehand()",pausefade) } else { i_slide++ if (i_slide>=slideurl.length) {i_slide=0} getcontent() document.getElementById('slidecontainer').innerHTML=slidecontent transparency=0 var fadetimer=setTimeout("unfadeslidehand()",500) } } function autoslide(){ if (ie) { if (!stopshow) { newpause=pauseslide i_slide++ if (i_slide>=slideurl.length) {i_slide=0} getcontent() i_filter++ if (i_filter>slidecontainer.filters.length-1) {i_filter=0} slidecontainer.filters[i_filter].apply() slidecontainer.innerHTML=slidecontent document.all.sound.src=slidesound; slidecontainer.filters[i_filter].play() checkifcached() } else { var stoptimer=setTimeout("autoslide()",500) } } if (ns6 || op) { newpause=pauseslide i_slide++ if (i_slide>=slideurl.length) {i_slide=0} getcontent() document.getElementById('slidecontainer').innerHTML=slidecontent transparency=0 i_space=max_space checkifcached() } } function handslide(){ i_slide++ if (i_slide>=slideurl.length) {i_slide=0} getcontent() if (ie) { i_filter++ if (i_filter>slidecontainer.filters.length-1) {i_filter=0} slidecontainer.filters[i_filter].apply() slidecontainer.innerHTML=slidecontent slidecontainer.filters[i_filter].play() } if (ns6 || op) { document.getElementById('slidecontainer').innerHTML=slidecontent transparency=100 } } function simpleslideshow() { i_slide++ if (i_slide>=slideurl.length) {i_slide=0} document.slideimage.src=preloadedimages[i_slide].src simpleslideshowcomment() var fadetimer=setTimeout("simpleslideshow()",pauseslide) } function simpleslideshowcomment() { if (i_space>=0){ all_space="" content="" for (i=0;i<i_space;i++) { all_space+=" " } for (i=0;i<slidecomment[i_slide].length;i++) { var thisletter=slidecomment[i_slide].substring(i,i+1) thisletter=thisletter+all_space content+=thisletter } window.status=content i_space-- var fadetimer=setTimeout("simpleslideshowcomment()",pausefade) } else { clearTimeout(fadetimer) i_space=max_space } } function simpleslideshowjump() { if (slidetarget[i_slide]=="_self") { document.location.href=slidelink[i_slide] } else if (slidetarget[i_slide]=="_blank") { codepopup=window.open(slidelink[i_slide], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=780,height=580,top=10,left=10"); } else if (slidetarget[i_slide]=="_top") { top.location.href=slidelink[i_slide] } else if (slidetarget[i_slide]=="_parent") { parent.location.href=slidelink[i_slide] } else { var jumpto=eval("parent."+slidetarget[i_slide]) jumpto.location.href=slidelink[i_slide] } } if (ie) { document.write('<div style="position:relative;width:'+slidewidth+'px;height:'+slideheight+'px;overflow:hidden">') document.write('<div id="slidecontainer" style="position:absolute;width:'+slidewidth+'px;height:'+slideheight+'px;top:0px;left:0px;filter:progid:DXImageTransform.Microsoft.GradientWipe(duration=1.2,wipeStyle=1)"></div>') document.write('</div>') document.write('<embed src="'+slidesound+'" autostart="false" hidden="true">') document.write('<bgsound id="sound">') window.onload=initslideshow4 } else if (ns6||op) { document.write('<div style="position:relative;width:'+slidewidth+'px;height:'+slideheight+'px;overflow:hidden">') document.write('<div id="slidecontainer" style="position:absolute;width:'+slidewidth+'px;height:'+slideheight+'px;top:0px;left:0px;-moz-opacity:100"></div>') document.write('</div>') window.onload=initslideshow4 } else if (ns4) { document.write('<a href="javascript:simpleslideshowjump()"><img name="slideimage" src="'+slideurl[0]+'" border=0></a>') i_slide=-1 window.onload=simpleslideshow } // more javascript from http://www.knowsky.com </script> </td></tr></table>