Een Knop Laten Knipperen

Inhoudsopgave:

Een Knop Laten Knipperen
Een Knop Laten Knipperen

Video: Een Knop Laten Knipperen

Video: Een Knop Laten Knipperen
Video: Make The Led Blink With The Push Button Using Arduino Uno 2024, November
Anonim

Een knipperende knop is een webdesign-element dat helpt om een pagina helder en aantrekkelijk te maken. Wanneer u dit effect gebruikt, moet u echter nadenken over het gemak van gebruikers: maak geen misbruik van de kabbelende "chips".

Een knop laten knipperen
Een knop laten knipperen

instructies:

Stap 1

Als de vereiste knop, weergegeven als een koppelingsafbeelding en van kleur verandert nadat u de cursor heeft geplaatst, maakt u deze met behulp van de tabel en de kenmerken onMouseOver en onMouseOut.

Knop

Stap 2

U kunt een knipperende knop maken met JavaScript. Gebruik de volgende code om het effect te laten werken bij de muisaanwijzer en uit te faden nadat de cursor is verwijderd: Tabkop arrColor = ["0", "1", "2", "3", "4", "5 ", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; functie mouseOut () {for (i = 0; i <13; i ++) setTimeout ('document.blinkbutton.button.style.background = "#' + arrColor [15-i] + '0' + arrColor [15 -i] + 'FFF ";', ik * 50); } functie mouseOver () {for (i = 0; i <15; i ++) setTimeout ('document.blinkbutton.button.style.background = "#' + arrColor + '0' + arrColor + 'F31'; ', ik * 50); }

Stap 3

Als je Adobe Photoshop bij de hand hebt, kun je een knipperend effect maken in de grafische editor. Maak hiervoor een nieuw bestand en nieuwe lagen, waarvan het aantal gelijk moet zijn aan de som van de frames. Selecteer daarna in het rechterpaneel de eerste laag met een "oog" en open het item "Animatie" in het menu "Venster". Klik in het paneel dat verschijnt op de knop Frame dupliceren, verplaats het "oog" naar de volgende laag, enzovoort. Klik met de rechtermuisknop op elk frame en stel de tijd in. Bekijk een voorbeeld van het resultaat, wijzig het indien nodig en sla het op in GIF-formaat (“Save for Web”).

Aanbevolen: