Categories

Slider jQuery “SlideBox”

Template-help.com Team marzo 17, 2011
Rating: 4.0/5. From 1 vote.
Please wait...

Un simple script que nos permite lograr un efecto de ‘sliding box’ (caja de deslizador) con contenido.

JavaScript

Debemos incluir framework jQuery señalando el atributo src de la etiqueta de script a esos ficheros .js.
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
Colocamos el script de inicialización en la sección <head> </head>.
<script type="text/javascript">
    $(function()
        {
        $("#link").click(function(event) {
        event.preventDefault();
        $(this).toggleClass("link2");
        $("#dropdown_box").slideToggle();
        });
    });
</script>
.header-banner-right esta clase define la altura de la caja en la posición oculta #link este es un elemento de botón con una imagen que oculta el contenido #dropdown_box este id es el área de contenido de la caja (cuadro).

HTML

Aquí  puede revisar la representación general  de script HTML:

CSS

#link {
background:url(images/button_go_box.png) no-repeat 0 0;
display:block;
height:39px;
width:39px;
z-index:180000;
margin:0 0 0 471px;
position:absolute;
}

.dropdown_box {
z-index:1;
}

.dropdown_box {
    zoom:0;
    z-index:1;
}
.all .dropdown_box {
    zoom:0;
    z-index:1;
}
Esta entrada fue publicada el Slider, Trabajar con scripts de jQuery y etiquetada jQuery, slidebox, slider. Agregar enlace permanente a marcadores.

Submit a ticket

Si Usted todavía no puede encontrar un tutorial suficiente para arreglar su problema, por favor use el siguiente enlace para enviar un ticket a nuestro equipo de soporte técnico. Nosotros enviaremos nuestra respuesta dentro de próximas 24 horas: Enviar un ticket