|
|
|
| Come ruotare il testo di Laurea in JavaScript |
|
CSS Level 3 comprende un metodo di " trasformazione ", che prende il numero di gradi come parametro e ruota il contenuto, ad esempio testo , da quel numero di gradi . È possibile definire una classe CSS per ogni grado di rotazione e di usare JavaScript per ruotare il testo , modificando la classe CSS assegnato il contenuto di un tag. Ad esempio, è possibile animare il testo utilizzando il metodo JavaScript " setInterval " per chiamare una funzione di rotazione a intervalli regolari a tempo. Cose che ti serviranno uno di questi browser : Firefox 3.5 o superiore Safari 3.1 o superiore Chrome 4.0 o superiore Opera 10.5 o superiore Internet Explorer 9.0 o superiore Mostra più istruzioni 1 creare un nuovo documento HTML utilizzando il blocco note o un editor HTML . Immettere le intestazioni HTML nel documento : < ! DOCTYPE HTML >
< p > Rotazione testo < /title> <br> 2 <p> Creare uno stile CSS per il corpo del documento da impostare un margine e una grande dimensione dei caratteri per il testo da ruotare : <br> <p> <style> <br> corpo <p> {margin : 60px ; font-family : Arial , Helvetica , sans - serif ; carattere -size: 36px ; } <br> 3 <p> Definire classi CSS a diversi gradi di rotazione . Visualizza il testo in un blocco , impostare la posizione di essere " relativo ", impostare l'altezza e la larghezza e comprende il generico e specifico del fornitore proprietà di trasformazione per ruotare il testo di un certo numero di gradi : . <br> <p> Rotation0 { display: block; position: relative; width: 200px ; height: 200px ; } <br> <p> rotation60 {display : . blocco ; position: relative; width: 200px ; height: 200px ; - webkit - transform : rotate ( 60deg ) ; -moz - transform : rotate ( 60deg ) ; - ms - transform : rotate ( 60deg ) ; -o- transform : rotate ( 60deg ) ; trasformazione: . rotate ( 60deg );} <br> <p> rotation120 {display : block; position: relative; width: 200px ; height: 200px ; - webkit - transform : rotate ( 120deg ) ; -moz - transform : rotate ( 120deg ) ; - ms - transform : rotate ( 120deg ) ; -o- transform : rotate ( 120deg ) ; transform: rotate ( 120deg );} <br> <p> rotation180 { display: block; posizione : . relative; larghezza : 200px ; height: 200px ; - webkit - transform : rotate (180 °) ; -moz - transform : rotate (180 °) ; - ms - transform : rotate (180 °) ; -o- transform : rotate (180 °) ; transform : rotate (180 °) ; } <br> <p> rotation240 { display: block; posizione . : relative; width: 200px ; height: 200px ; - webkit - transform : rotate ( 240deg ) ; -moz - transform : rotate ( 240deg ) ; - ms - transform : rotate ( 240deg ) ; -o- transform : rotate ( 240deg ) , transform : rotate ( 240deg );} <br> <p> rotation300 {display : . blocco ; position: relative; width: 200px ; height: 200px ; - webkit - transform : rotate ( 300deg ) ; -moz - transform : rotate ( 300deg ) ; - ms - transform : rotate ( 300deg ) ; -o- transform : rotate ( 300deg ) ; trasformazione: . rotate ( 300deg );} <br> <p> rotation360 { display: block; position: relative ; larghezza : 200px ; height: 200px ; - webkit - transform : rotate ( 360deg ) ; -moz - transform : rotate ( 360deg ) ; - ms - transform : rotate ( 360deg ) ; -o- transform : rotate ( 360deg ) ; transform : ruotare ( 360deg );} <br> <p> < /style > <br> 4 <p> Creare una funzione JavaScript per cambiare la classe del testo per la successiva rotazione , o per ricominciare da zero se la rotazione successiva calcolato è maggiore di 360 gradi . Inizializzare una variabile globale per monitorare la corrente di gradi di rotazione : <br> <p> <script> <br> <p> var rotazione = 0; <br> <p> funzione rotate () { <br> rotazione <p> = (rotazione 60 > 360 ) ? 0 : . Rotazione 60 ; <br> <p> document.getElementById ( "testo" ) className = "rotazione " + rotazione; <br> <p> } <br> 5 <p> Chiamare il Javascript " setInterval " metodo per eseguire la funzione di rotazione a intervalli regolari a tempo, specificato in millisecondi : <br> <p> window.setInterval ( " rotate ( ) " , 1000) ; <br> <p> < /script > < br > <p> < /head> <br> 6 <p> Creare un tag <div> per il testo e assegnargli la prima classe CSS . Inserisci il testo da ruotare all'interno del tag <div> : <br> <p> <body> <br> <p> <div id="text" class="rotation0"> GIREVOLE < /div > <br> <p> < /body> <br> <p> < /html > <br> 7 <p> salvare il file. Aprirlo con un browser e guardare il testo ruotare sullo schermo . <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/90939.html' >Come installare il Facebook Javascript SDK </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/90941.html' >Come output JSON dati con JavaScript </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/91194.html" title="Come controllare per gli interi in JavaScript " target="_self">Come controllare per gli interi in JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91010.html" title="Come collegare i file JS esterni " target="_self">Come collegare i file JS esterni </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91127.html" title="Come creare applicazioni Silverlight con JavaScript " target="_self">Come creare applicazioni Silverlight con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90800.html" title="Come fare più marcatori con Maps API " target="_self">Come fare più marcatori con Maps API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91116.html" title="Come aggiungere due numeri con Javascript " target="_self">Come aggiungere due numeri con Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91024.html" title="Come modificare il contenuto di un iFrame con JavaScript " target="_self">Come modificare il contenuto di un iFrame con JavaScrip…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91168.html" title="Come rimuovere una barra degli indirizzi in HTML " target="_self">Come rimuovere una barra degli indirizzi in HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90879.html" title="Come incorporare JavaScript Asp.net " target="_self">Come incorporare JavaScript Asp.net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90944.html" title="Come utilizzare JavaScript per visualizzare Fattori primari " target="_self">Come utilizzare JavaScript per visualizzare Fattori pri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90860.html" title="Come fare un link Bounce con jQuery " target="_self">Come fare un link Bounce con jQuery </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/visual-basics-programming/95337.html" title="Come impostare le dimensioni di un form in Visual Basic " target="_self">Come impostare le dimensioni di un form in Visual Basic…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88411.html" title="Come aprire i file JPG con Microsoft Net Framework 2.0 " target="_self">Come aprire i file JPG con Microsoft Net Framework 2.0 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89030.html" title="Che cosa è multihomed Host in Java " target="_self">Che cosa è multihomed Host in Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/85757.html" title="Come incrementare automaticamente un numero di build in Visual C " target="_self">Come incrementare automaticamente un numero di build in…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86767.html" title="Come fare Scrollbar colori funzionano per iFrame " target="_self">Come fare Scrollbar colori funzionano per iFrame </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86756.html" title="Come simulare una perdita in MATLAB " target="_self">Come simulare una perdita in MATLAB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86500.html" title="Come usare Caso in UML " target="_self">Come usare Caso in UML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92604.html" title="Come controllare la disponibilità di dominio in PHP " target="_self">Come controllare la disponibilità di dominio in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/86416.html" title="Come controllare per i bot con ColdFusion " target="_self">Come controllare per i bot con ColdFusion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92111.html" title="Come convertire un anno dall'inizio due cifre in PHP " target="_self">Come convertire un anno dall'inizio due cifre in PHP </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> | | |
