Open een teksteditor , zoals Kladblok of WordPad om een ​​nieuw tekstdocument maken
2

Plaats deze code in de editor : .

functie MacStyleDock ( knooppunt , imageDetails , minimumSize , maximumSize , range ) { var iconsNode = document.createElement ( ' div ' ) ; node.appendChild ( iconsNode ) ; var reflectedIconsNode = document.createElement ( ' div ' ) ; node.appendChild ( reflectedIconsNode ) ; iconsNode.style.textAlign = ' center ' ; reflectedIconsNode.style.textAlign = ' center ' ; iconsNode.style.height = maximumSize + ' px ' ; reflectedIconsNode.style.height = maximumSize + ' px ' ; var maximumWidth = 0 ; var schaal = 0 ; var closeTimeout = null ; var closeInterval = null ; var openInterval = null ; var afbeeldingen = [ ] ; var iconNodes = [ ] ; var reflectedIconNodes = [ ] ; var iconSizes = [ ] ; for ( var i = 0 ; i < imageDetails.length ; i + + ) { iconNodes [ i ] = document.createElement ( ' img ' ) ; iconNodes [ i ] style.position = ' relatieve ' ; . iconSizes [ i ] = minimumSize ; reflectedIconNodes [ i ] = ( . iconNodes [ i ] addEvenListener ) { iconNodes [ i ] addEventListener ( ' mousemove ' , processMouseMove , false) ; . iconNodes [ i ] addEventListener ( ' mouseout ' , processMouseOut , false) ; . . iconNodes [ i ] addEventListener ( ' click ' , 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 ] naam + imageDetails [ i ] maten [ j ] + imageDetails [ i ] extensie . . . ) ; images.push ( image ) ; } } functie updateIconProperties ( index ) { var size = minimumSize + schaal * ( iconSizes [ index ] - minimumSize ) ; var sizeIndex = 0 ; terwijl ( imageDetails [ index ] maten [ sizeIndex ] < size && sizeIndex + 1 < imageDetails [ index ] . . sizes.length ) { sizeIndex + + ; } if ( size == maximumSize ) { iconNodes [ index ] setAttribute ( ' src ' , imageDetails [ index] naam + maximumSize + ' - vol' + imageDetails [ index ] extensie ) ; . . . } else { iconNodes [ index ] . setAttribute ( ' src ' , imageDetails [ index] . naam + imageDetails [ index] . maten [ sizeIndex ] + imageDetails [ index ] maten [ sizeIndex ] + ' - reflectie ' + imageDetails [ index ] extensie ) ; . . iconNodes [ index ] setAttribute ( 'width' , grootte) ; . . iconNodes [ index ] setAttribute ( 'height' , grootte) ; reflectedIconNodes [ index] setAttribute ( 'width' , grootte) ; reflectedIconNodes [ index] setAttribute ( 'height' , grootte) ; iconNodes [ index] style.marginTop = ( maximumSize - formaat) + ' px ' ; . . . reflectedIconNodes [ ,"index] style.marginBottom = ( maximumSize - formaat) + ' px ' ; }
3

Append deze code : .

functie processMouseMove
( e ) { window.clearTimeout ( closeTimeout ) ; closeTimeout = null; window.clearInterval ( closeInterval ) ; closeInterval = null; if ( schaal = 1 && openInterval ! ) { openInterval = Window.setInterval ( function ( ) { if ( schaal < 1 ) schaal + = 0,125 ; if ( schaal > = 1 ) { schaal = 1 ; window.clearInterval ( openInterval ) ; openInterval = null; } for ( var i = 0 ; i < iconNodes.length ; i + + ) { updateIconProperties ( i ) ;} } , 20 ) ;} if ( e ) e = window.event ; var target = e.target | | e.srcElement ; ! var index = 0 ; terwijl ( iconNodes [ index] = doel) -index + + ; var over = ( e.layerX | | e.offsetX ) /iconSizes [ index ] ; if ( over ) { var currentWidth = 0; for ( var i = 0 ; i < iconNodes.length ; i + + ) { if ( i < index - range | | i> index + range ) { iconSizes [ i ] = minimumSize ; } else if ( i == index ) { iconSizes [ i ] = maximumSize ; } else if ( i < index ) { iconSizes [ i ] = minimumSize + Math.round ( ( maximumSize - minimumSize - 1 ) * ( Math.cos ( ( i - index - over + 1 ) /bereik * Math.PI ) + 1 ) /2 ) ; currentWidth + = iconSizes [ i ] ; } else { iconSizes [ i ] = minimumSize + Math.round ( ( maximumSize - minimumSize - 1 ) * ( Math.cos ( ( i - index - over ) /bereik * Math.PI ) + 1 ) /2 ) ; currentWidth + = iconSizes [ i ] ; } } if ( currentWidth > maximumWidth ) maximumWidth = currentWidth if ( index > = range && index < iconSizes.length - range && currentWidth < maximumWidth ) { iconSizes [ index - range ] + = Math.floor ( ( maximumWidth - currentWidth ) /2 ) ; iconSizes [ index + range ] + = Math.ceil ( ( maximumWidth - currentWidth ) /2 ) ;} for ( var i = 0 ; i < iconNodes . lengte ; i + + ) updateIconProperties ( i ) ; } } functie processMouseOut ( ) { if ( closeTimeout && closeInterval ) { closeTimeout = window.setTimeout ( function ( ! ) { closeTimeout = null; if ( openInterval ) { venster . clearInterval ( openInterval ) ; openInterval = null; } closeInterval = Window.setInterval ( function ( ) { if ( schaal > 0 ) schaal - = 0.125 ; if ( schaal < = 0 ) { schaal = 0 ; window.clearInterval ( closeInterval ) ; closeInterval = null; } for ( var i = 0 ; i < iconNodes.length ; i + + ) { updateIconProperties ( i ) ;} } , 20 ) ;} , 100 ) ; } } }
4

Sla het bestand in de map met de HTML- pagina die u wilt het dok in te voegen en noem het " dockable_menu.js " . De " js . " Extensie is verplicht om het bestand uit een tekstdocument naar een JavaScript-bestand te wijzigen .
5

Open de webpagina in een tekst-of HTML-editor . Plaats deze code tussen de " " en " < /head > ' tags om het script uit te voeren :

< script type = " text /javascript " src = " dockable_menu.js " > < /script >
6

Insert deze code ergens tussen de " " en " < /body > " tags: