Nwlapcug.com


Come creare un bordo lampeggiante sul DIV

Come creare un bordo lampeggiante sul DIV


La creazione di un bordo lampeggiante su un elemento < DIV > è un buon modo per attirare l'attenzione dei visitatori al tuo sito Web. Per ottenere questo risultato, è necessario utilizzare la funzione "setInterval ()" di JavaScript per creare un ciclo flash il bordo del DIV. Il numero di colori utilizzati nell'animazione lampeggia è efficacemente senza limito, significa che è possibile creare un bordo lampeggiante per abbinare qualsiasi sito Web o ambiente.

Istruzioni

1

Apri il. HTML o. File PHP che contiene la tua pagina Web. Poiché rich text editor come Word può introdurre errori di formattazione che riducono la compatibilità, è possibile utilizzare un semplice editor come blocco note o TextEdit per apportare modifiche al codice HTML.

2

Scorri fino alla sezione di intestazione del documento HTML. Aggiungere il seguente codice immediatamente dopo il "< head >" tag di apertura:

< script type = "Text/JavaScript" >

<!...

stato di var = 0;

Flash di var = 100;

Function flash(div_id) {self.setInterval ("changeBorder ('" + div_id + "')", Flash);}

Function changeBorder(div_id) () {

if(state==0) {Document. getElementById (div_id).style.borderColor = '#ffffff'; stato = 1;}

else {document. getElementById (div_id).style.borderColor = '#000000'; stato = 0;}

}

-->

< / script >

3

Modificare "#ffffff" - bianco solido-- e "#000000" - nero a tinta unita..--se necessario, per colori che si adattano meglio il tuo sito Web. Usare la notazione di colore standard HTML, con "#" seguito da due numeri esadecimali per il valore rosso, due per il verde e due per il blu.

4

Aggiungere un nuovo elemento < DIV > nella sezione body della pagina Web utilizzando il seguente codice:

< div onclick="flash('flashing')" id = "lampeggiante" style = "border: 4px solid #000000;" > inizia a lampeggiare < / div >

Questo creerà un nuovo DIV, con un bordo spesso intorno alle parole "Avviare lampeggiante" che, quando cliccato, lampeggia rapidamente il bordo DIV.

Consigli & Avvertenze

  • Il codice può essere utilizzato con qualsiasi elemento < DIV >; Basta cambiare la parte tra le parentesi della funzione Flash per l'id del div nuovo. Ad esempio, se tu avessi un div chiamato "contenitore", si scriverebbe "< div id ="contenitore"onclick="flash('container') ">" invece.
  • Se si desidera flash al confine con più di due colori, aggiungere "else if" istruzioni dopo l'istruzione "if" nella funzione changeBorder(), aumentando il valore della variabile "stato" di ogni tempo; per esempio, "if(state==1) else {document. getElementById (div_id).style.borderColor = '#888888'; stato = 2; } "causerà il bordo DIV a flash grigio ("#888888") prima lampeggia nero.