|
|
|
| Hvordan Roter Tekst av Degree i JavaScript |
|
CSS Level 3 inkluderer en " transform "-metoden som tar antall grader som en parameter og roterer innhold, for eksempel tekst , ved at antall grader . Du kan definere en CSS-klasse for hver grad av rotasjon og bruke JavaScript for å rotere teksten ved å endre CSS-klasse tildelt til innholdet i en kode . For eksempel kan du animere tekst ved hjelp av JavaScript " setInterval " metode for å kalle en rotasjon fungere på en regelmessig tidsbestemt intervall . Du trenger: En av disse nettleserne : en Firefox 3.5 eller høyere Safari 3.1 eller høyere Chrome 4.0 eller høyere Opera 10.5 eller høyere Internet Explorer 9.0 eller høyere Vis flere instruksjoner en Lag en ny HTML- dokument ved hjelp av Notepad eller en HTML- editor. Inn HTML overskrifter i dokumentet : < ! DOCTYPE HTML >
< p> Roterende Tekst < /title> <br> 2 <p> Lag CSS styling for kroppen av dokumentet til sette en margin og en stor skriftstørrelse for teksten skal roteres : <br> <p> <style> <br> <p> kroppen { margin: 60px ; font- family: Arial , Helvetica , sans - serif ; font - size : 36px ;} <br> 3 <p> Definer CSS klasser på ulike grader av rotasjon. Vise teksten i en blokk , angi posisjonen å være " slektning ", angir høyde og bredde og inkluderer generisk og leverandør-spesifikk forvandle egenskaper for å rotere teksten et visst antall grader : . <br> <p> Rotation0 { display: block ; position: relative ; bredde : 200px ; høyde : 200px ;} <br> <p> rotation60 {display : . blokk ; position: relative ; bredde : 200px ; høyde: 200px ; - webkit - transform : rotate ( 60deg ) ; - moz - transform : rotate ( 60deg ) ; - ms - transform : rotate ( 60deg ) ; -o - transform : rotate ( 60deg ) ; transform : . rotere ( 60deg ) ;} <br> <p> rotation120 {display : block ; position: relative ; bredde : 200px ; høyde: 200px ; - webkit - transform : roter ( 120deg ) ; - moz - transform : roter ( 120deg ) ; - ms - transform : roter ( 120deg ) ; -o - transform : roter ( 120deg ), transform : roter ( 120deg ) ;} <br> <p> rotation180 {display : block ; posisjon : . relative ; bredde : 200px ; høyde: 200px ; - webkit - transform : roter ( 180 grader) ; - moz - transform : roter ( 180 grader) ; - ms - transform : roter ( 180 grader) ; -o - transform : roter ( 180 grader) , transform : roter ( 180 grader) ;} <br> <p> rotation240 {display : block ; posisjon. : relative ; bredde : 200px ; høyde: 200px ; - webkit - transform : roter ( 240deg ) ; - moz - transform : roter ( 240deg ) ; - ms - transform : roter ( 240deg ) ; -o - transform : roter ( 240deg ) ; transform : roter ( 240deg ) ;} <br> <p> rotation300 {display : . blokk ; position: relative ; bredde : 200px ; høyde: 200px ; - webkit - transform : roter ( 300deg ) ; - moz - transform : rotere ( 300deg ) ; - ms - transform : roter ( 300deg ) ; -o - transform : roter ( 300deg ), transform : . roter ( 300deg ) ;} <br> <p> rotation360 {display : block ; stilling : relative; bredde : 200px ; høyde: 200px ; - webkit - transform : roter ( 360deg ) ; - moz - transform : roter ( 360deg ) ; - ms - transform : roter ( 360deg ) ; -o - transform : roter ( 360deg ), transform : rotere ( 360deg ) ;} <br> <p> < /style > <br> 4 <p> Lag en JavaScript-funksjon for å endre klasse av teksten til neste rotasjon , eller å starte på null dersom neste beregnede rotasjon er større enn 360 grader. Klargjøre en global variabel å spore gjeldende graders rotasjon : en <p> <script> <br> <p> Var rotasjon = 0; <br> <p> funksjon roter ( ) { <br> <p> rotasjon = (rotasjon +60 > 360 ) ? 0 : . Rotasjon 60 ; <br> <p> document.getElementById ( "tekst" ) className = "rotasjon " + rotasjon; <br> <p> } <br> 5 <p> Ring JavaScript " setInterval " metode for å utføre rotasjonen fungere på en regelmessig tidsbestemt intervall , spesifisert i millisekunder : en <p> window.setInterval ( " roter ( ) " , 1000), <br> <p> < /script > <br > <p> < /head> <br> 6 <p> Opprett en <div> tag for teksten og tilordne den første CSS-klasse . Skriv inn teksten som skal roteres inne i <div> tag: <br> <p> <body> <br> <p> <div id="text" class="rotation0"> ROTERENDE < /div > <br> <p> < /body > <br> <p> < /html > <br> 7 <p> Lagre filen . Åpne den med en nettleser og se teksten rotere på skjermen . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="745" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f4">
<tr>
<td bgcolor="#ecf0f4"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center" height="26">
<tr>
<td width="51%"><p>früher ： <a class='LinkPrevArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90939.html' >Slik installerer Facebook JavaScript SDK </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/90941.html' >Hvordan du kan overføre JSON data med JavaScript </a></li></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" height=7>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=770 align=center height=246>
<tr>
<td height=246 vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Relatert Artike</strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<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.datamaskin.biz/Programmering/javascript-programming/90870.html" title="Sette inn CrawlTrack Into WordPress " target="_self">Sette inn CrawlTrack Into WordPress </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91193.html" title="Hvordan Fyll en Combobox med JavaScript " target="_self">Hvordan Fyll en Combobox med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91077.html" title="Hvordan lage JavaScripts " target="_self">Hvordan lage JavaScripts </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91147.html" title="Hvordan lage tekst basert nettleser Games " target="_self">Hvordan lage tekst basert nettleser Games </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90783.html" title="Kode beautifiers for JavaScript " target="_self">Kode beautifiers for JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91282.html" title="Hvordan håndtere eldre nettlesere med Javascript " target="_self">Hvordan håndtere eldre nettlesere med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91246.html" title="Endre en musepeker i Javascript " target="_self">Endre en musepeker i Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90781.html" title="Et nytt vindu er blokkert i JavaScript " target="_self">Et nytt vindu er blokkert i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91081.html" title="Hvordan skrive til IIS Log " target="_self">Hvordan skrive til IIS Log </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90997.html" title="Hvordan skrive til en Div. Fra JavaScript " target="_self">Hvordan skrive til en Div. Fra JavaScript </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=20></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><strong>Anbefalte artikler </strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<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.datamaskin.biz/Programmering/cc-programming/85721.html" title="Hvordan lage en String uforanderlige " target="_self">Hvordan lage en String uforanderlige </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/94420.html" title="Hvordan lage Wave data fra buffere i VB6 " target="_self">Hvordan lage Wave data fra buffere i VB6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/91803.html" title="Hvordan Test XML Parse " target="_self">Hvordan Test XML Parse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/90105.html" title="Hvordan Input en String i Java " target="_self">Hvordan Input en String i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90754.html" title="Slik konverterer en vanlig Node til en jQuery Node " target="_self">Slik konverterer en vanlig Node til en jQuery Node </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/94389.html" title="Slik konverterer et bilde til Transparent i Visual Basic " target="_self">Slik konverterer et bilde til Transparent i Visual Basi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/delphi-programming/88951.html" title="Hvordan slette en fil med Sub - mappe og filer i Delphi " target="_self">Hvordan slette en fil med Sub - mappe og filer i Delphi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/87239.html" title="Hvordan å kompilere et Class File " target="_self">Hvordan å kompilere et Class File </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/90638.html" title="Slik konverterer Java Objects " target="_self">Slik konverterer Java Objects </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/93068.html" title="MySQL PHP Apache Tutorial " target="_self">MySQL PHP Apache Tutorial </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 height=8>
<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=center>Copyright © Datamaskin http://www.datamaskin.biz/
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
