|
|
|
| Cómo girar texto de Licenciado en JavaScript |
|
CSS Nivel 3 incluye un método de " transformación " que lleva el número de grados como parámetro y gira contenido, como texto, por ese número de grados. Puede definir una clase CSS para cada grado de rotación y el uso de JavaScript para girar texto cambiando la clase CSS asignado al contenido de una etiqueta . Por ejemplo , puede animar texto con el método de JavaScript " setInterval " para llamar a una función de rotación en un intervalo de tiempo regular. Cosas que necesitará sobre One de estos navegadores : Firefox 3.5 o superior Safari 3.1 o superior Chrome 4.0 o superior Opera 10.5 o superior Internet Explorer 9.0 o superior Ver Más instrucciones 1 Crear un nuevo documento HTML con el Bloc de notas o un editor HTML. Introduzca los encabezados de HTML en el documento :
< p> Rotación texto < /title> <br> 2 <p> Crear un estilo CSS para el cuerpo del documento para establecer un margen y un tamaño de fuente para el texto que desea girar : <br> <p> <style> <br> <p> body {margin : 60px ; font- family: Arial , Helvetica , sans- serif; fuente -size: 36px ;} <br> 3 <p> Definir clases CSS en diferentes grados de rotación. Muestra el texto de un bloque , establezca la posición de ser " relativa", establece la altura y la anchura , e incluyen los genéricos y específicos del fabricante propiedades de transformación para rotar el texto de un cierto número de grados : . <br> <p> Rotation0 { display : block; position: relative ; ancho : 200px ; altura : 200px ;} <br> <p> rotación60 {display : . bloque ; position: relative ; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 60deg ) -moz -transform : rotate ( 60 grados ) ; -ms- transform: rotate ( 60 grados ), -o- transform: rotate ( 60 grados ) ; transform: . rote ( 60 grados ) ;} <br> <p> rotation120 {display : block; position: relative ; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 120deg ) -moz -transform : rotate ( 120deg ) -ms- transform: rotate ( 120deg ) -o- transform: rotación ( 120deg ) ; transform: rotate ( 120deg ) ;} <br> <p> rotation180 {display : block; posición : . relativa; ancho : 200px ; altura : 200px ; - webkit- transform: rotate (180 grados ) ; -moz -transform : rotación (180 grados ) ; -ms- transform: rotación (180 grados ), -o- transform: rotación (180 grados ) ; transform: rotación (180 grados ) ;} <br> <p> rotation240 {display : block; posición. : relative; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 240deg ) -moz -transform : rotate ( 240deg ) -ms- transform: rotate ( 240deg ) -o- transform: rotate ( 240deg ) ; transform: rotate ( 240deg ) ;} <br> <p> rotation300 {display : . bloque ; position: relative ; ancho : 200px ; altura : 200px ; - webkit- transform: rotate ( 300deg ) -moz -transform : girar ( 300deg ) -ms- transform: rotate ( 300deg ) -o- transform: rotate ( 300deg ) ; transform: . rotate ( 300deg ) ;} <br> <p> rotation360 {display : block; position: relative ; ancho : 200px , alto: 200px ; - webkit- transform: rotate ( 360deg ) -moz -transform : rotate ( 360deg ) -ms- transform: rotate ( 360deg ) -o- transform: rotate ( 360deg ) ; transform: girar ( 360deg ) ;} <br> <p> < /style> <br> 4 <p> Crear una función de JavaScript para cambiar la clase del texto a la siguiente rotación, o para volver a empezar de cero si el siguiente rotación calculada es mayor que 360 grados . Iniciar una variable global para seguir el actual grado de rotación : <br> <p> <script> <br> <p> rotación var = 0 ; <br> función <p> girar () { <br> rotación <p> = (rotación 60 > 360 ) ? 0 : . Rotación 60 ; <br> <p> document.getElementById ( "text ") className = "rotación" + rotación; <br> <p> } <br> 5 <p> Llame al JavaScript " " método para ejecutar la función de rotación en un intervalo de tiempo regular , se especifica en milisegundos : <br> <p> window.setInterval setInterval ( " girar () " , 1000) ; <br> <p> < /script> < br > <p> < /head> <br> 6 <p> Crear una etiqueta <div> para el texto y asignarle la primera clase CSS. Introduzca el texto que desea girar dentro de la etiqueta <div> : <br> <p> <body> <br> <p> <div id="text" class="rotation0"> ROTATING < /div > <br> <p> < /body> <br> <p> < /html> <br> 7 <p> Guarde el archivo . Abra con un navegador y ver el texto gira en la pantalla . <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='/Programacion/javascript-programming/90939.html' >Cómo instalar el Facebook JavaScript SDK </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/90941.html' >Acerca de la salida de datos JSON 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"> Artículos relacionados </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="/Programacion/javascript-programming/90806.html" title="Cómo utilizar el API de Google Maps distancia de radio " target="_self">Cómo utilizar el API de Google Maps distancia de radio…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90779.html" title="Cómo crear una animación 3D Logo en Javascript " target="_self">Cómo crear una animación 3D Logo en Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91271.html" title="Cómo escribir Java Script " target="_self">Cómo escribir Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90939.html" title="Cómo instalar el Facebook JavaScript SDK " target="_self">Cómo instalar el Facebook JavaScript SDK </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91240.html" title="Java script Solución de problemas " target="_self">Java script Solución de problemas </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90958.html" title="Cómo detectar los agentes de usuario y redireccionamiento " target="_self">Cómo detectar los agentes de usuario y redireccionamie…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90813.html" title="Cómo obtener el ancho de un elemento en Javascript " target="_self">Cómo obtener el ancho de un elemento en Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91079.html" title="Cómo crear OOP JavaScript " target="_self">Cómo crear OOP JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91098.html" title="Cómo crear una galería de fotos con Siguiente y Anterior Enlaces y Ampliación de imagen Pop - Ups " target="_self">Cómo crear una galería de fotos con Siguiente y Anter…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90971.html" title="Cómo crear un borde parpadeante en DIV " target="_self">Cómo crear un borde parpadeante en DIV </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">Artículos destacados </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="/Programacion/cc-programming/85466.html" title="Cómo compilar CPP mediante Visual Studio " target="_self">Cómo compilar CPP mediante Visual Studio </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95723.html" title="Cómo utilizar un servicio Web para mostrar datos en Visual Basic Net " target="_self">Cómo utilizar un servicio Web para mostrar datos en Vi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90350.html" title="Cómo subir imágenes en JSP " target="_self">Cómo subir imágenes en JSP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/85380.html" title="Cómo utilizar el operador Vector3 Ogre " target="_self">Cómo utilizar el operador Vector3 Ogre </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88262.html" title="Cómo transferir los datos de un conjunto de registros ADO a una mesa con ADO " target="_self">Cómo transferir los datos de un conjunto de registros …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91762.html" title="PHP Cadena Tutorial " target="_self">PHP Cadena Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/94057.html" title="Cómo comprobar si un módulo cargado en Python " target="_self">Cómo comprobar si un módulo cargado en Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91576.html" title="Cómo configurar el DSN y MySQL en GoDaddy " target="_self">Cómo configurar el DSN y MySQL en GoDaddy </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90595.html" title="Java 1.5 Enum Tutorial " target="_self">Java 1.5 Enum Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/ruby-programming/94252.html" title="Cómo actualizar rubíes Gemas " target="_self">Cómo actualizar rubíes Gemas </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 © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
| | |
