Ako si vyrobiť Menu dokovatelný s JavaScriptu

Ak chcete zobraziť svoje ponuky ako štýlové radu snímok , ktoré môžete prechádzať a kliknite na , budete musieť implementovať dokovat ponuku JavaScript . Keď umiestnite kurzor myši nad jeden z malých obrázkov , sa rozširuje a môžete naň prejsť na inú stránku . Ponuka ukotvitelných skript je užitočné pre pridávanie funkcií na vašich webových stránkach . Okrem toho , že sa zobrazí správne vo všetkých prehliadačoch , a môžete ho použiť kdekoľvek na vašich stránkach . Pokyny dovolená 1

Otvorte textový editor , napríklad Poznámkový blok alebo WordPad vytvoriť nový textový dokument
2

Vložte tento kód v editore : .
< P > Funkcia MacStyleDock ( uzol , imageDetails , MinimumSize , MaximumSize , rozsah ) { 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 scale = 0 ; var CloseTimeout = null ; var closeInterval = null ; var openInterval = null ; var images = [ ] ; var iconNodes = [ ] ; var reflectedIconNodes = [ ] ; var iconSizes = [ ] ; for ( var i = 0 ; i < imageDetails.length ; i + + ) { iconNodes [ i ] = document.createElement ( ' img ' ) ; iconNodes [ i ] style.position = ' relatívna ' ; . iconSizes [ i ] = MinimumSize ; reflectedIconNodes [ i ] = ( . IconNodes [ i ] addEventListener ) { 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 ] Názov + imageDetails [ i ] [ j ] veľkosti + imageDetails [ i ] rozšírenie ... ) ; images.push ( image ) ; } } Funkcia updateIconProperties ( index ) { var size = MinimumSize + stupnice * ( iconSizes [ index ] - MinimumSize ) ; . var sizeIndex = 0 ; while ( imageDetails [ index ] veľkosť [ sizeIndex ] < veľkosť && sizeIndex + 1 < imageDetails [ index ] . sizes.length ) { sizeIndex + + ; } if ( size == MaximumSize ) { iconNodes [ index ] setAttribute ( " src " , imageDetails [ index ] Názov + MaximumSize + ' plný ' + imageDetails [ index ] rozšírenie ) ... } else { iconNodes [ index ] . setAttribute ( " src " , imageDetails [ index ] . názov + imageDetails [ index ] . veľkosti [ sizeIndex ] + . imageDetails [ index ] veľkosť [ sizeIndex ] + ' - reflexie " + imageDetails [ index ] príponu ) ; .. iconNodes [ index ] setAttribute ( " šírka " , veľkosť) . iconNodes [ index ] setAttribute ( " výška " , veľkosť ) ; reflectedIconNodes [ index ] setAttribute ( " šírka " , veľkosť ) ; reflectedIconNodes [ index ] setAttribute ( " výška " , veľkosť ) ... iconNodes [ index ] style.marginTop = ( MaximumSize - size) + " px " ; reflectedIconNodes [ ,". Obsah ] style.marginBottom = ( MaximumSize - size) + " px " ; }
3

Pripojiť tento kód :

funkcie processMouseMove ( e ) { window.clearTimeout ( CloseTimeout ) ; CloseTimeout = null ; window.clearInterval ( closeInterval ) ; closeInterval = null ; if ( stupnice = 1 && openInterval ! ) { openInterval = Window.setInterval ( function ( ) { if ( scale < 1 ) scale + = 0,125 ; if ( stupnice > = 1 ) { scale = 1 ; window.clearInterval ( openInterval ) ; openInterval = null ; } for ( var i = 0 ; i < iconNodes.length , i + + ) { updateIconProperties ( aj ) ; } } , 20 ) ; } if ( e ) e = window.event ; var target = e.target

• Predchádzajúca strana: Ako kódovať parametre v AJAX 
• Ďalšia strana: Ako previesť Pravidelné uzol k uzlu jQuery