Hvis du vil vise menyen som en stilig rad med bilder du kan bla gjennom og klikke på, må du gjennomføre en JavaScript forankres menyen. Når du plasserer musepekeren over en av de små bildene , utvider det og du kan klikke den for å navigere til en annen side . En kan forankres menyen skriptet er nyttig for å legge til funksjoner til ditt nettsted. Videre vises det riktig i alle nettlesere , og du kan bruke den hvor som helst på sidene dine. Instruksjoner
en

Åpne en teksteditor , for eksempel Notepad eller WordPad for å lage et nytt tekstdokument
2

Sett denne koden inne redaktøren: .
< P > funksjon MacStyleDock ( node, imageDetails , minimumSize , maximumSize , range ) {var iconsNode = document.createElement (' div '); node.appendChild ( iconsNode ) ; Var reflectedIconsNode = document.createElement (' div '); node.appendChild ( reflectedIconsNode ) ; iconsNode.style.textAlign = ' sentrum '; reflectedIconsNode.style.textAlign = ' sentrum '; iconsNode.style.height = maximumSize + ' px '; reflectedIconsNode.style.height = maximumSize + ' px '; Var maximumWidth = 0 ; Var skala = 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 = "slektning" ; . iconSizes [ i] = minimumSize ; reflectedIconNodes [i ] = ( . iconNodes [ i] addEventListener ) { iconNodes [ i] addEventListener (' mouseMove ' , processMouseMove , false); . iconNodes [ i] addEventListener (' mouseout ' , processMouseOut , false); . . iconNodes [ i] addEventListener ( "klikk ' , 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 ] navn + imageDetails [i ] størrelsene [ j ] + imageDetails [ i] forlengelse. . . ) ; images.push ( image ) ;} } funksjon updateIconProperties ( indeks) {var size = minimumSize + skala * ( iconSizes [ index ] - minimumSize ); Var sizeIndex = 0 , mens ( imageDetails [ index ] størrelsene [ sizeIndex ] < størrelse && sizeIndex + 1 < imageDetails [ index ] . . sizes.length ) { sizeIndex + +; } if ( size == maximumSize ) { iconNodes [ index ] setAttribute (' src ' , imageDetails [ index ] navn + maximumSize + ' full ' + imageDetails [ index ] forlengelse) ; . . . } else { iconNodes [ index ] . setAttribute (' src ' , imageDetails [ index ] . navn + imageDetails [Indeks] . størrelser [ sizeIndex ] + imageDetails [ index ] størrelsene [ sizeIndex ] + '- refleksjon ' + imageDetails [ index ] forlengelse) ; . . iconNodes [ index ] setAttribute ( 'bredde ' , størrelse); . . iconNodes [ index ] setAttribute (' høyde ' , størrelse ) ; reflectedIconNodes [Indeks] setAttribute ( 'bredde ' , størrelse); reflectedIconNodes [ index ] setAttribute (' høyde ' , størrelse ), iconNodes [Indeks] style.marginTop = ( maximumSize - størrelse ) + ' px '; . . . reflectedIconNodes [ ,"index ] style.marginBottom = ( maximumSize - størrelse ) + ' px "; }
3

Tilføy denne koden : .

funksjon 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 ; if ( skala > = 1 ) { skala = 1; window.clearInterval ( openInterval ) ; openInterval = null; } for ( var i = 0 , jeg < iconNodes.length , jeg + + ) { updateIconProperties (i ) ;} } , 20 ) ;} if ( e ) e = window.event ; Var target = e.target