网页中点击连接显示和隐藏过渡效果的图层

2024-04-27 13:59:58

字体：大中小

来源：转载

供稿：网友

<SCR<a href="http://ip.vevb.com/">ip</a>T language=<a href="http://www.vevb.com/article.asp?typeid=160">java</a>Script>var is<a href="http://www.vevb.com/article.asp?typeid=38">CSS</a> = false;var isW3C = false;var isIE4 = false;var isNN4 = false;var isIE6 = false;var isGecko = false;var is<a href="http://www.vevb.com/article.asp?typeid=190">Opera</a> = false;var is<a href="http://www.vevb.com/article.asp?typeid=40">DHTML</a> = false;var sup<a href="http://pr.vevb.com/">PR</a>essMenus = 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( "/t/t<A HREF=/"" + href[cycle] + "/"><IMG SRC=/"" + src[cycle] + "/" alt=/"" + caption[cycle] + "/" BORDER=/"0/" ID=/"monimg" + cycle + "/"></a>" ); } else { document.writeln( "/t/t<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 <a href="http://www.vevb.com/article.asp?typeid=36">Javascript</a> from http://www.vevb.com</SCRIPT><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.vevb.com";imgs[0] = "/img/200406301.jpg";caps[0] = "说明一";urls[1] = "http://www.vevb.com";imgs[1] = "/img/200406302.jpg";caps[1] = "说明二";urls[2] = "http://www.vevb.com";imgs[2] = "/img/200406303.jpg";caps[2] = "说明三";urls[3] = "http://www.vevb.com";imgs[3] = "/img/200406304.jpg";caps[3] = "说明四";urls[4] = "http://www.vevb.com";imgs[4] = "/img/200406305.jpg";caps[4] = "说明五";montage( urls, imgs, caps, 461 );</SCRIPT></TD></TR></TBODY></TABLE>

上一篇：简单实用特效代码，打开一个层后可以拖动

下一篇：CSS模拟制作的techweb网站导航特效代码