Foros del Web - Ver Mensaje Individual - Efecto slider para contenido en paginas web

huertas87 · #9 (**permalink**) 10/04/2012, 11:54

Si, si tienes varios contenidos sería mejor que los tuvieras todo dentro del mismo documento html,
nombrandolos con un ID como lo has hecho con "contenido", y los demás irían ocultos.

Entonces, declaramos los id's de todos los contenidos en nuestro documento html

Código HTML:

<body>

<div class="footer">
<ul id="menu-inferior">
<li><a id="slideContenido" href="#" style="color:#BA007C">inicio</a></li>
<li><a id="slideContenido2" href="#">la agencia</a></li>
<li><a id="slideContenido3" href="#">trabajos</a></li>
<li><a id="slideContenido4" href="#">soportes</a></li>
<li><a id="slideContenido5" href="#">clientes</a></li>
<li><a id="slideContenido6" href="#">noticias</a></li>
<li><a id="slideContenido7" href="#">contacta</a></li>
</ul>
</div>

<div id="contenido">
[Aqui iria contenido de tipo texto, o una galeria de imagenes]
</div>

<div id="contenido2">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 2]
</div>

<div id="contenido3">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 3]
</div>

<div id="contenido4">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 4]
</div>

<div id="contenido5">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 5]
</div>

<div id="contenido6">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 6]
</div>

<div id="contenido7">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 7]
</div>


</body>

El primer contenido lo dejamos visible y los demás los ocultamos con display:none

Código HTML:

<style type="text/css">
#contenido 
{
 margin: 0px;
 width: 500px;
 background-color:#FFFFFF;
 height: 30px;
 border: 1px solid black;
 position:absolute;

 }
 
#contenido2 
{ 
 margin: 0px;
 width: 500px;
 background-color:#FFFFFF;
 height: 30px;
 border: 1px solid black;
 position:absolute;
 display:none;
 }
</style>

Ahora incluimos lo eventos de jquery, ocultando los contenido que no deben aparecer hacia la izquierda y mostrando los que sí por la derecha

Código:

<script>
  $(document).ready(function() {
    
$("#slideContenido").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
//Con esto ocultaremos todos los contenidos que deben desaparecer
});

$("#slideContenido").click(function () {
      $("#contenido").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido2").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido2").click(function () {
      $("#contenido2").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido3").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);/
});

$("#slideContenido3").click(function () {
      $("#contenido3").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido4").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido4").click(function () {
      $("#contenido4").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido5").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido5").click(function () {
      $("#contenido5").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido6").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido6").click(function () {
      $("#contenido6").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido7").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido7").click(function () {
      $("#contenido7").show("drop", { direction: "rigth" }, 1500);
});

  });
  </script>

Bueno, ps espero que te sirva... si tienes alguna duda solo pregunta.

[URL="https://twitter.com/#!/Jonathanp089"]@Jonathanp089[/URL]