|
|
|
| Come ruotare un Div in JavaScript |
|
La homepage di molti siti web di oggi contiene una serie di immagini che ruotano o scivolare dentro e fuori della pagina . Questa funzionalità è implementata con la creazione di un unico tag con più immagini e con il metodo JavaScript " setInterval " per ruotare il su un programma a tempo in modo che una sola immagine viene visualizzata in un momento . La rotazione JavaScript è spesso accompagnata da effetti di animazione che la dissolvenza o scorrimento immagini o testo in e fuori del . La libreria jQuery fornisce un modo semplice per selezionare le immagini e applicare una rotazione animata . Istruzioni 1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML . Inserire le intestazioni HTML nel documento : < ! DOCTYPE HTML >
< p > Ruota Div < /title> <br> 2 <p> creare stili CSS per la <div> a essere ruotato . Impostare la posizione, la larghezza, l'altezza e il colore di sfondo per la <div> . Disattivare la visualizzazione delle immagini nel <div> e abilitare la visualizzazione delle immagini con il nome della classe "attiva" : <br> <p> <style> <br> <p> # ruotare { <br> < p > position: relative; <br> <p> width : 979 ; <br> altezza <p> : 349 ; <br> <p> background-color : # 999999 ; } <br> <p> <br> < p > # ruotare img { <br> visualizzazione <p> : none; <br> posizione <p> : absolute ; <br> <p> top : 0 ; <br> <p> sinistra : 0 ; <br> < p > } <br> <p> # ruotare img.active { <br> visualizzazione <p> : block; } <br> <p> <br> <p> < /style > <br> < br > 3 <p> Inserire la libreria jQuery nel documento includendo da una fonte pubblica , come ad esempio le API di Google : <br> <p> < lo script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js " > < /script> <br> 4 <p> Inserisci il codice JavaScript per ruotare le immagini nel <div> . Trovare l'immagine con la classe "attivo" e selezionare l'immagine successiva nella lista. Se la dimensione dell'immagine successiva è pari a zero , ricominciare all'inizio della lista con la prima immagine : <br> <p> funzione rotate () { var <br> <p> attivo = $ ( " # ruotare attivo . " ) ; <br> <p> if ( $ (" . . . # ruotare attivo ") . . next () lunghezza > 0 ) per <p> var next = $ ( " # ruotare attivo " ) next (); <br> <p> altro <br> <p> var next = $ ( " # ruotare img : primo "); <br> 5 <p> Fade l'immagine con la classe "attivo " fuori e dissolvenza l'immagine successiva in Rimuovere la classe "attivo" da l'immagine corrente e assegnarlo alla prossima immagine : <br> <p> active.fadeOut ( "veloce" , function () Pagina 6 <p> impostare un timer per ruotare le immagini ogni cinque secondi con il metodo " setInterval " : . <br> <p> $ (document) ready ( function () { <br> <p> setInterval ( " ruotare ( ) " , 5000) ; <br> <p> }); <br> <p> < /script> <br> <p> < /head> <br> 7 <p> Insert il <div> nel corpo del documento e assegnare la classe "attivo " per la prima immagine : <br> <p> <body> <br> <p> <div id="rotate"> <br> <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " width = " 979 " height = alt " 349 " = classe " immagine1 " = " attiva "> <br> <p> < img src = " http://l.yimg.com/g/images/soup_hero_124.jpg.v1 " width = " 979 " height = " " alt = " 349 Image2 " > <br> <p> <img src="http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1" width="979" height="349" alt="Image3"> ; <br> <p> <img src="http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1" width="979" height="349" alt="Image4"> <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> 8 <p> salvare il documento . Apritelo in un browser e guardare le immagini in <div> ruotano sullo schermo con una dissolvenza in entrata e in uscita ogni cinque secondi . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programmazione/javascript-programming/90941.html' >Come output JSON dati con JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/90943.html' >I migliori Javascript Sliders Immagine </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Articoli Correlati </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90926.html" title="Come rimuovere le barre di scorrimento utilizzando Javascript " target="_self">Come rimuovere le barre di scorrimento utilizzando Java…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90998.html" title="Come ottenere larghezza del browser " target="_self">Come ottenere larghezza del browser </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90886.html" title="Come usare ShrinkSafe Con NetBeans " target="_self">Come usare ShrinkSafe Con NetBeans </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91211.html" title="Come modificare l' azione del form in JavaScript Select " target="_self">Come modificare l' azione del form in JavaScript Select…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90999.html" title="Come modificare un attributo di classe CSS con JavaScript " target="_self">Come modificare un attributo di classe CSS con JavaScri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90995.html" title="Come modificare un URL in una pagina con JavaScript " target="_self">Come modificare un URL in una pagina con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90963.html" title="Rimozione di una barra di scorrimento verticale in JavaScript " target="_self">Rimozione di una barra di scorrimento verticale in Java…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91060.html" title="Come rimuovere un tag P con jQuery " target="_self">Come rimuovere un tag P con jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91267.html" title="Come creare un modulo di registrazione per un sito web " target="_self">Come creare un modulo di registrazione per un sito web </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90960.html" title="Le Proprietà del iFrame in Java " target="_self">Le Proprietà del iFrame in Java </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Articoli in evidenza </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92909.html" title="Tutorial su stored procedure in MySQL 3.23 " target="_self">Tutorial su stored procedure in MySQL 3.23 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/85212.html" title="Cosa significa se un file app già esistente su un iPad ? " target="_self">Cosa significa se un file app già esistente su un iPad…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/95302.html" title="Semplici Progetti di Visual Basic " target="_self">Semplici Progetti di Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/90609.html" title="Come convertire Meter a piedi in Java " target="_self">Come convertire Meter a piedi in Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/perl-programming/93349.html" title="Come rimuovere stringa in Perl " target="_self">Come rimuovere stringa in Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/86198.html" title="Come utilizzare lo stack STL Container Classe " target="_self">Come utilizzare lo stack STL Container Classe </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/90703.html" title="Come creare un server proxy in Java " target="_self">Come creare un server proxy in Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87987.html" title="Come modificare un registro con Austrumi " target="_self">Come modificare un registro con Austrumi </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88559.html" title="Come copiare e incollare una pagina Web a un altro sito web " target="_self">Come copiare e incollare una pagina Web a un altro sito…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/90214.html" title="Come convertire una data in UTC Utilizzo di Java " target="_self">Come convertire una data in UTC Utilizzo di Java </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
