Cómo crear un Top deslizante para una página web en jQuery

Cómo crear un Top deslizante para una página web en jQuery


Los diseñadores Web que están mirando para agregar más interactividad y efectos slick a sus sitios web deben mirar más allá de jQuery. Como una biblioteca JavaScript, jQuery hace más fácil escribir guiones, sobre todo para los diseñadores ya están bien versados ​​en la Hoja de Estilo en Cascada código. Tapas correderas son un efecto muy popular jQuery, y tienen muchos usos. Úsalos para las formas de inicio de sesión, los avisos o alertas especiales.

Instrucciones

HTML y CSS de instalación

1

Abra el archivo HTML en un editor de código; encontrar la etiqueta <body>. Después de esa etiqueta, agregue apertura y cierre de etiquetas <div> y dar a la pareja una, pero significativo, nombre de ID específico. Entre estas etiquetas, añadir el contenido que desea a deslizarse hacia abajo. El estilo de la etiqueta <div> y su contenido en CSS como lo haría para cualquier otra parte de la página web. Compruebe la página web en su navegador para que pueda ver cómo el <div> se ve.

2

Hacer otro <div> por debajo de la que contiene el contenido de su deslizamiento. Añadir un enlace dentro de ese <div> con el texto como "Haga Click para Ver". Este enlace desencadena la parte superior <div> se deslice hacia abajo. Dé este enlace un ID y el estilo de la nueva <div> como una pestaña. Cuando los visitantes ver el sitio, verán la pestaña primero.

3

Agregue el siguiente código CSS para ocultar el <div> cuando un usuario visita la página:

div nombre {display: none; } 4

Añadir la versión más reciente de la biblioteca jQuery para su sitio web. Google hace una copia a disposición del público. Usted puede utilizar su dirección web en su código en lugar de descargar jQuery y la posibilidad de subir tu mismo. Su código se verá así:

<Script type = "javascript / texto" como "javascript / texto" dentro de la abertura etiqueta <script>. Escriba el siguiente código de jQuery entre las etiquetas <script>:

$ (Document) .ready (function () {

// El código va aquí

});

6

Escribir código jQuery para activar el <div> cuando un usuario hace clic en el enlace. Aquí está el código:

$ ("# View"). Click (function () {

});

Este código indica al navegador para iniciar una nueva función cuando el usuario hace clic en una etiqueta con un ID de "punto de vista." Va a añadir la animación deslizante dentro de esa función.

7

Escriba su código de jQuery para aplicar la animación "slideDown" a su etiqueta <div>. En jQuery, se empieza con un selector CSS como "div" para el nombre de la etiqueta o "# DIV-name" para el ID de la etiqueta, y luego se agrega en una función. Aquí está el código:

$ ('# Div-name') slideToggle ('lento.');

El código anterior también se desliza la caja de nuevo después de que el usuario hace clic en el vínculo por segunda vez. Cambie "lento" a "rápida" para acelerar la animación.

Consejos y advertencias

  • Para depurar código JavaScript como jQuery, utilice las "Herramientas Web Developer" en "Herramientas" en Google Chrome o descargar la extensión Firebug para Firefox. Estas herramientas muestran errores de JavaScript y proporcionan otras características útiles.