|
|
|
| Cómo girar una Div JavaScript |
|
La página de inicio de muchos sitios web de hoy contiene una serie de imágenes que giran o deslizarse dentro y fuera de la página. Esta funcionalidad se implementa mediante la creación de una sola etiqueta con múltiples imágenes y utilizando el método " setInterval " JavaScript para girar el en un horario programado para que sólo una imagen se visualiza a la vez. La rotación JavaScript suele ir acompañada de efectos de animación que se desvanecen o se deslizan imágenes o texto dentro y fuera de la . La biblioteca jQuery proporciona una forma sencilla de seleccionar las imágenes y aplicar una rotación animada . Instrucciones 1 Crear un nuevo documento HTML con el Bloc de notas o un editor HTML. Inserte los encabezados de HTML en el documento :
< p> Gire Div < /title> <br> 2 <p> Crear un estilo CSS para la <div> a pueden girar. Ajuste la posición , anchura, altura y color de fondo del <div> . Desactivar la visualización de las imágenes en el <div> y permitir la visualización de la imagen con el nombre de la clase "activa ": <br> <p> <style> <br> <p> # rote { <br> < p > position: relative ; <br> <p> ancho : 979 ; <br> altura <p> : 349 ; <br> <p> background-color : # 999999 ; } <br> <p> <br> < p > # girar img { <br> <p> display : none ; <br> posición <p> : absolute; <br> <p> top: 0 ; <br> <p> izquierda : 0 ; <br> < p >} <br> <p> # girar img.active { <br> <p> display : block; <br> <p> <br> <p> } < /style> <br> < br > 3 <p> Inserte la biblioteca jQuery en el documento mediante la inclusión de una fuente pública, como las API de Google : <br> <p> < script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js "> < /script> <br> 4 <p> Agregue el código JavaScript para girar las imágenes en el <div> . Encuentre la imagen con la clase "activa " y seleccione la imagen siguiente en la lista. Si el tamaño de la imagen siguiente es cero, empezar a volver al principio de la lista con la primera imagen : <br> función <p> girar () { var <br> <p> activa = $ ("# girar activo. "); <br> <p> if ( $ (" . . . # girar activo ") . . next () longitud > 0 ) <br> <p> var next = $ (" # girar activa " ) junto (); <br> <p> más <br> <p> var next = $ ("# girar img: primero "); <br> 5 <p> Fundir la imagen con la clase "activa " fuera y desaparecer la imagen siguiente in Retire la clase "activa " de la imagen actual y asignarlo a la siguiente imagen : <br> <p> active.fadeOut ( "fast " , function () Página 6 <p> Programar un cronómetro para girar las imágenes cada cinco segundos, utilizando el método de " setInterval ": . <br> <p> $ (document ) ready ( function () { <br> <p> setInterval ( " rotar () " , 5000) ; <br> <p> } ) ; <br> <p> < /script > <br> <p> < /head> <br> 7 <p> Insert el <div> en el cuerpo del documento y asignar la clase "activa " a la primera imagen : <br> <p> <body> <br> <p> <div id="rotate"> <br> <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " href = " 979 " alt = " 349 " = class " Image1 " = "activa "> <br> <p> < img src =" http://l.yimg.com/g/images/soup_hero_124.jpg.v1 " width =" " height =" 979 "alt =" 349 Image2 " > <br> <p> <img width="979" height="349" src="http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1" alt="Image3"> ; <br> <p> <img width="979" height="349" src="http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1" alt="Image4"> <br> <p> < /div > <br> <p> < /body> <br> <p> < /html> <br> 8 <p> Guardar el documento. Abre en un navegador y ver las imágenes en el <div> giran en la pantalla con un fundido de entrada y salida cada cinco segundos. <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/90941.html' >Acerca de la salida de datos JSON con JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/90943.html' >Los mejores Javascript Sliders Imagen </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/91022.html" title="Cómo comparar los objetos de fecha en JavaScript " target="_self">Cómo comparar los objetos de fecha en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91222.html" title="Cómo crear una búsqueda de imágenes en una página web " target="_self">Cómo crear una búsqueda de imágenes en una página w…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91229.html" title="Cómo convertir texto a Java Script " target="_self">Cómo convertir texto a Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91108.html" title="Cómo cambiar el texto de un rollover " target="_self">Cómo cambiar el texto de un rollover </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90974.html" title="Lista de los atributos de jQuery " target="_self">Lista de los atributos de jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91207.html" title="Cómo configurar el fondo de animación en una página Web " target="_self">Cómo configurar el fondo de animación en una página …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91149.html" title="Javascript Tutorial para PDF " target="_self">Javascript Tutorial para PDF </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91119.html" title="Cómo deshabilitar la pantalla de impresión JavaScript " target="_self">Cómo deshabilitar la pantalla de impresión JavaScript…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90827.html" title="Cómo trazar lentamente en JavaScript " target="_self">Cómo trazar lentamente en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90818.html" title="Cómo utilizar la dirección de la calle en lugar de Lat /Long en el API de Google Maps " target="_self">Cómo utilizar la dirección de la calle en lugar de La…</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/java-programming/89660.html" title="Procedimiento para interceptar eventos clave en Java " target="_self">Procedimiento para interceptar eventos clave en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88107.html" title="Cómo comparar las diferencias en dos filas en Oracle SQL " target="_self">Cómo comparar las diferencias en dos filas en Oracle S…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88533.html" title="SQL Scripting Tutorial " target="_self">SQL Scripting Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91409.html" title="Cómo acelerar PHP Curl " target="_self">Cómo acelerar PHP Curl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/85548.html" title="Cómo vincular a un archivo CPP " target="_self">Cómo vincular a un archivo CPP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91855.html" title="Cómo cambiar cada fila de una tabla MySQL con una secuencia simple de PHP " target="_self">Cómo cambiar cada fila de una tabla MySQL con una secu…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94622.html" title="Cómo utilizar SQLite en Vb.net " target="_self">Cómo utilizar SQLite en Vb.net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/85588.html" title="Cómo compilar un CPP Con un archivo de encabezado " target="_self">Cómo compilar un CPP Con un archivo de encabezado </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87960.html" title="Cómo crear Autocad programas Lisp " target="_self">Cómo crear Autocad programas Lisp </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/87902.html" title="Distintas formas de mostrar la fecha en la línea de comandos " target="_self">Distintas formas de mostrar la fecha en la línea de co…</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>
| | |
