网页中点击连接显示和隐藏过渡效果的图层 dn001 2009-06-21 08:55:10 <!-- bbs http://www.knowsky.com/bbs--> <!-- 把下列代码加到<head>区域内 --> <SCRIPT language=JavaScript> var isCSS = false; var isW3C = false; var isIE4 = false; var isNN4 = false; var isIE6 = false; var isGecko = false; var isOpera = false; var isDHTML = false; var suppressMenus = false; function autoconfig() { if(document && document.images) { isCSS = (document.body && document.body.style) ? true : false; isW3C = (isCSS && document.getElementById) ? true : false; isIE4 = (isCSS && document.all && readIEVer() >= 4.0) ? true : false; isNN4 = (document.layers) ? true : false; isGecko = (isCSS && navigator && navigator.product && navigator.product == "Gecko"); isOpera = (isCSS && navigator.userAgent.indexOf( "Opera") != -1 ); isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false; isIE6 = ( isIE6CSS && readIEVer() >= 6.0 ); isDHTML = isCSS && ( isIE4 || isGecko || isOpera ); if( suppressMenus || ( isOpera && readOperaVer() < 7 ) || ( isGecko && navigator.productSub <= 20011022 ) || ( isGecko && navigator.productSub == 20030107 ) ) { // Opera 6.x doesn't seem to like the DHTML... // Netscape 6.2 puts the menus in the wrong place... // Safari, the menus don't go away... problem in ResetMenu isDHTML = false; } } } function readIEVer() { var agent = navigator.userAgent; var offset = agent.indexOf( "MSIE" ); if( offset < 0 ) { return 0; } return parseFloat( agent.substring( offset + 5, agent.indexOf( ";", offset ) ) ); } function montage( href, src, caption, width, animate ) { // this is the case for browsers that don't support filters... var cycle = Math.floor( Math.random() * href.length ); // switch off animation if we're not on broadband var m_montage = ( typeof(animate) != "undefined" ? animate : hasBroadband() ); if( m_montage == false || src.length <= 1 || !( isIE4 || isW3C ) ) { montagePicker( href, src, caption, cycle ); return; } // go build all of the nested DIVs out monIdx = cycle; document.writeln( "<div id="container" style="width:" + width +"px;height:112px">" ); for( i = 0; i < src.length; i++ ) { // set up a placeholder document.writeln( "t<div id="montage" + i + "" style="display:none">" ); montagePicker( href, src, caption, i ); document.writeln( "t</div>" ); } document.writeln( "</div>" ); // pull the images out monBlock = new Array( src.length ); monImg = new Array( src.length ); for( i = 0; i < src.length; i++ ) { monBlock[i] = document.getElementById( "montage" + i ).style; monImg[i] = document.getElementById( "monimg" + i ); if( monImg[i] == null ) { montagePicker( href, src, caption, i ); return; } // alert( "foo" ); } monContainer = document.getElementById("container"); montageEffects(); } function montageEffects() { var nextImage = (monIdx + 1) % monImg.length; // run the transition if( readIEVer() >= 4.0 ) { monContainer.style.filter = "blendTrans(duration=1.5) revealTrans(duration=1.0,transition=7)"; monContainer.filters(0).apply(); monContainer.filters(1).apply(); montageSelect( nextImage ); monContainer.filters(0).play(); monContainer.filters(1).play(); } else { montageSelect( nextImage ); } // asked to be called again a little later setTimeout( "montageSwap()", monTimeout ); } function montageSelect( nextImage ) { //alert( monImg[monIdx].style.visibility ); monBlock[monIdx].display = "none"; monIdx = nextImage; monBlock[monIdx].display = "block"; } function montageSwap() { if( monImg[monIdx].complete ) { // move the image index along montageEffects(); } else { // check again 3 seconds later setTimeout( "montageSwap()", 3000 ); } } function montagePicker( href, src, caption, cycle ) { if( href[cycle] != null ) { document.writeln( "tt<A HREF="" + href[cycle] + ""><IMG SRC="" + src[cycle] + "" alt="" + caption[cycle] + "" BORDER="0" ID="monimg" + cycle + ""></a>" ); } else { document.writeln( "tt<IMG SRC="" + src[cycle] + "" ID="monimg" + cycle + "">" ); } } function hasBroadband() { if( readIEVer() < 5.0 ) { return false; } try { document.body.addBehavior ("#default#clientCaps"); return ( typeof(document.body.connectionType) != "undefined" && document.body.connectionType == "lan" ); } catch( e ) { return false; } } //more javascript from http://www.knowsky.com </SCRIPT> <!-- 把下列代码加到<body>区域内 --> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=122> <SCRIPT language=JavaScript type=text/javascript> autoconfig(); monTimeout = 2000; var urls = new Array(); var imgs = new Array(); var caps = new Array(); urls[0] = "http://www.knowsky.com"; imgs[0] = "/img/200406301.jpg"; caps[0] = "说明一"; urls[1] = "http://www.knowsky.com"; imgs[1] = "/img/200406302.jpg"; caps[1] = "说明二"; urls[2] = "http://www.knowsky.com"; imgs[2] = "/img/200406303.jpg"; caps[2] = "说明三"; urls[3] = "http://www.knowsky.com"; imgs[3] = "/img/200406304.jpg"; caps[3] = "说明四"; urls[4] = "http://www.knowsky.com"; imgs[4] = "/img/200406305.jpg"; caps[4] = "说明五"; montage( urls, imgs, caps, 461 ); </SCRIPT> </TD></TR> </TBODY></TABLE>