Om du vill visa din meny som en snygg rad av bilder du kan bläddra igenom och klicka på , du behöver för att genomföra en JavaScript dockbar meny . När du placerar muspekaren över en av de små bilderna , expanderar den och du kan klicka på den för att navigera till en annan sida . En förankringsbara meny script är användbart för att lägga till funktioner till din webbplats . Vidare visas korrekt i alla webbläsare och du kan använda den var som helst på dina sidor . Instruktioner
1
Öppna en textredigerare , till exempel Anteckningar eller WordPad för att skapa ett nytt textdokument
2
in den här koden i editorn : .
funktionen MacStyleDock ( nod , imageDetails , minimumSize , maximumSize , intervall ) {var iconsNode = document.createElement ( ' div '); node.appendChild ( iconsNode ) , var reflectedIconsNode = document.createElement ( ' div ' ) ; node.appendChild ( reflectedIconsNode ) ; iconsNode.style.textAlign = "centrum" , reflectedIconsNode.style.textAlign = "centrum" , iconsNode.style.height = maximumSize + ' px ' ; reflectedIconsNode.style.height = maximumSize + ' px ' ; var maximumWidth = 0 , var skalan = 0 ; var closeTimeout = null ; var closeInterval = null ; var openInterval = null; var- bilder = []; var- iconNodes = []; var- reflectedIconNodes = []; var- iconSizes = [ ] ; for (var i = 0 ; i. < imageDetails.length , i + + ) { iconNodes [ i] = document.createElement ( ' img '); iconNodes [ i] style.position = ' släkting ' , . iconSizes [ i] = minimumSize , reflectedIconNodes [i ] = ( . iconNodes [ i] addEventListener ) { iconNodes [ i] addEventListener ( ' mouseMove ' , processMouseMove , false ) ; . iconNodes [ i] addEventListener ( ' mouseOut ' , processMouseOut , false ) ; . . iconNodes [ i] addEventListener ( ' klicka " , imageDetails [ i] onclick , false) ; . } else if ( iconNodes [ i] attachEvent ) { iconNodes [ i] attachEvent ( . . " onMouseMove ' , processMouseMove ) . iconNodes [ i] attachEvent ( ' onmouseout ' , processMouseOut ) ; iconNodes [ i] attachEvent ( " onclick " , imageDetails [ i] onclick ) . . } for (var j = 0; j < imageDetails [ i] sizes.length ; . j + + ) {var image = document.createElement ( ' img '); image.setAttribute ( ' src ' , imageDetails [ i] namn + imageDetails [i ] storlekar [ j ] + imageDetails [ i] förlängning . . . ) ; images.push ( image ) ;} } updateIconProperties funktion ( index ) {var size = minimumSize + skala * ( iconSizes [ index ] - minimumSize ) , var sizeIndex = 0 , medan ( imageDetails [ index ] storlekar [ sizeIndex ] < size && sizeIndex + 1 < imageDetails [ index ] . . sizes.length ) { sizeIndex + + ; } if ( size == maximumSize ) { iconNodes [ index ] setAttribute ( ' src ' , imageDetails [ index ] namn + maximumSize + ' - full " + imageDetails [ index ] förlängning ) , . . . } else { iconNodes [ index ] . setAttribute ( ' src ' , imageDetails [ index ] . namn + imageDetails [index ] . storlekar [ sizeIndex ] + imageDetails [ index ] storlekar [ sizeIndex ] + ' - reflexion " + imageDetails [ index ] förlängning ) ,. . iconNodes [ index ] setAttribute ( " bredd " , storlek ) , . . iconNodes [ index ] setAttribute ( " höjd " , storlek ) ; reflectedIconNodes [Index ] setAttribute ( "bredd" , storlek ) , reflectedIconNodes [ index ] setAttribute ( "höjd" , storlek ) , iconNodes [Index ] style.marginTop = ( maximumSize - storlek ) + ' px '; . . . reflectedIconNodes [ ,"index ] style.marginBottom = ( maximumSize - storlek ) + ' px ' ;} Addera 3
Lägg till denna kod : .
funktion processMouseMove ( e ) { window.clearTimeout ( closeTimeout ) ; closeTimeout = null; window.clearInterval ( closeInterval ) , closeInterval = null; if ( skala = 1 && openInterval ! ) { openInterval = Window.setInterval ( function ( ) {if ( skala < 1 ) skala + = 0,125 , om ( skala > = 1 ) { skala = 1 ; window.clearInterval ( openInterval ) , openInterval = null; } for (var i = 0 , I < iconNodes.length , jag + + ) { updateIconProperties (i ) ; } } , 20 ) ; } if ( e ) e = window.event , var target = e.target
