Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur Rotera Text efter examen i JavaScript
    CSS Level 3 innehåller en " transform " metod som tar det antal grader som en parameter och roterar innehåll, t.ex. text , genom att antal grader . Du kan definiera en CSS-klass för varje grad av rotation och använder JavaScript för att rotera text genom att ändra CSS- klassen för innehållet i en tagg . Till exempel , kan du animera text med JavaScript " setInterval " metod för att ringa en rotation funktion på ett regelbundet tidsintervall . Saker du behöver Review, en av dessa webbläsare :
    Firefox 3.5 eller högre
    Safari 3.1 eller högre
    Chrome 4.0 eller högre
    Opera 10.5 eller högre Review, Internet Explorer 9.0 eller högre

    Visa fler instruktioner
    1

    Skapa ett nytt HTML- dokument med hjälp av Anteckningar eller en HTML-editor . Ange HTML- rubriker i dokumentet : < ! DOCTYPE HTML >




    Roterande Text < /title > <br> 2 <p> Skapa CSS för kroppen av dokumentet ställa en marginal och en stor teckenstorlek för texten ska roteras : <br> <p> <style> <br> <p> body {margin : 60px ; font -family : Arial , Helvetica , sans - serif ; typsnitt - size : 36px ; } Addera 3 <p> Definiera CSS-klasser vid olika grader av rotation . Visa texten i ett block , ställa in positionen att vara " relativt ", ställ in höjd och bredd och inkludera det generiska och leverantörsspecifika förändra egenskaperna för att rotera texten ett visst antal grader : . <br> <p> Rotation0 { display : block; ställning : relativa ; width : 200px ; höjd : 200px ; } <br> <p> rotation60 { display : . block; ställning : relativa ; width : 200px ; höjd : 200px ; - webkit - transform : rotate ( 60deg ) , - moz - transform : rotate ( 60deg ) , - ms - transform : rotate ( 60deg ) , - o - transform : rotate ( 60deg ) , transform : . rotera ( 60deg ) ;} <br> <p> rotation120 { display : block ; ställning : relativa ; width : 200px ; höjd : 200px ; - webkit - transform : rotate ( 120deg ) , - moz - transform : rotate ( 120deg ) , - ms - transform : rotate ( 120deg ) , - o - transform : Rotera ( 120deg ) , transform : rotate ( 120deg ) ;} <br> <p> rotation180 { display : block; ställning : . relativ ; width : 200px ; höjd : 200px ; - webkit - transform : rotate ( 180 grader ) , - moz - transform : rotate ( 180 grader ) , - ms - transform : rotate ( 180 grader ) , - o - transform : rotate ( 180 grader ) , transform : rotate ( 180 grader ) ;} <br> <p> rotation240 { display : block; ställning . : släkting ; width : 200px ; höjd : 200px ; - webkit - transform : rotate ( 240deg ) , - moz - transform : rotate ( 240deg ) , - ms - transform : rotate ( 240deg ) , - o - transform : rotate ( 240deg ) , transform : rotate ( 240deg ) ;} <br> <p> rotation300 { display : . block; ställning : relativa ; width : 200px ; höjd : 200px ; - webkit - transform : rotate ( 300deg ) , - moz - transform : rotera ( 300deg ) , - ms - transform : rotate ( 300deg ) , - o - transform : rotate ( 300deg ) , transform : . rotate ( 300deg ) ;} <br> <p> rotation360 { display : block; ställning : relativa ; bredd : 200px ; höjd : 200px ; - webkit - transform : rotate ( 360deg ) , - moz - transform : rotate ( 360deg ) , - ms - transform : rotate ( 360deg ) , - o - transform : rotate ( 360deg ) , transform : rotera ( 360deg ) ;} <br> <p> < /style > <br> 4 <p> Skapa en JavaScript -funktion för att ändra klassen texten till nästa rotation , eller att börja om på noll om nästa beräknade rotationen är större än 360 grader . Initiera en global variabel för att spåra aktuella graders rotation : <br> <p> <script> <br> <p> var rotation = 0 ; <br> <p> funktionen rotera ( ) { <br> <p> rotation = ( rotation +60 > 360 ) ? 0 : . Rotation +60 ; <br> <p> document.getElementById ( " text " ) className = " rotation " + rotation; <br> <p> } <br> 5 <p> Ring JavaScript " setInterval " metod för att utföra rotationen fungerar på ett regelbundet tidsintervall , anges i millisekunder : <br> <p> Window.setInterval ( " rotera ( ) " , 1000), <br> <p> < /script > <br > <p> < /head > <br> 6 <p> Skapa en <div> tagg för text och tilldela den första CSS-klass . Ange texten som ska roteras inuti <div> tag: <br> <p> <body> <br> <p> <div id="text" class="rotation0"> ROTATING < /div > <br> <p> < /body> <br> <p> < /html > <br> 7 <p> Spara filen . Öppna den med en webbläsare och titta på texten rotera på skärmen . <br> <br> <div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90939.html' >Hur man installerar Facebook JavaScript SDK </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90941.html' >Hur till utgång JSON data med JavaScript </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/javascript-programming/90846.html" title="Hur man skapar ett JavaScript Wrapper för API " target="_self">Hur man skapar ett JavaScript Wrapper för API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91204.html" title="Hur man installerar Java Script på en PC " target="_self">Hur man installerar Java Script på en PC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90783.html" title="Kod Förvackrare för JavaScript " target="_self">Kod Förvackrare för JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91265.html" title="Hur vill kolla Null-värde i JavaScript " target="_self">Hur vill kolla Null-värde i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91262.html" title="Hur du ändrar en muspekare Använda Javascript " target="_self">Hur du ändrar en muspekare Använda Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91019.html" title="Hur man skickar en JavaScript-funktion i en hyperlänk " target="_self">Hur man skickar en JavaScript-funktion i en hyperlänk </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91161.html" title="En ActiveX Javascript Tutorial " target="_self">En ActiveX Javascript Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91154.html" title="Hur man drar ett cirkeldiagram med hjälp av JavaScript " target="_self">Hur man drar ett cirkeldiagram med hjälp av JavaScript…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90921.html" title="Kod för Referera en JS -fil " target="_self">Kod för Referera en JS -fil </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90837.html" title="Grundläggande Exempel på JQuery " target="_self">Grundläggande Exempel på 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 class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94706.html" title="VBA strängjämförelse Funktioner " target="_self">VBA strängjämförelse Funktioner </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90650.html" title="Hur man använder Java Web Start " target="_self">Hur man använder Java Web Start </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85576.html" title="Fakta om CPP Compiler " target="_self">Fakta om CPP Compiler </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85849.html" title="Konvertera Char * till Int & C + + " target="_self">Konvertera Char * till Int & C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85791.html" title="Hur man skapar en binär fil från C # " target="_self">Hur man skapar en binär fil från C # </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/91804.html" title="Hur man sparar Decimaler till MySQL " target="_self">Hur man sparar Decimaler till MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/94357.html" title="Hur man skapar ett program som fungerar som en enkel Boolean Calculator för 32 - bitars heltal " target="_self">Hur man skapar ett program som fungerar som en enkel Bo…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88779.html" title="Scrum metodik " target="_self">Scrum metodik </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85927.html" title="Lägga till protokollet till DateTime " target="_self">Lägga till protokollet till DateTime </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90525.html" title="Skillnaden mellan en Java Applet och Javascript " target="_self">Skillnaden mellan en Java Applet och Javascript </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>