Foros del Web » Creando para Internet » CSS »

script para "sacar la ropa" ;)

Estas en el tema de script para "sacar la ropa" ;) en el foro de CSS en Foros del Web. Hola amigos, aca comparto un sencillo script que, obviamente no saca la ropa magicamente, si no que simplemente va mostrando una imagen por encima de ...
  #1 (permalink)  
Antiguo 04/03/2010, 14:02
 
Fecha de Ingreso: noviembre-2003
Mensajes: 22
Antigüedad: 14 años
Puntos: 1
Información script para "sacar la ropa" ;)

Hola amigos, aca comparto un sencillo script que, obviamente no saca la ropa magicamente, si no que simplemente va mostrando una imagen por encima de otra a medida que se pasa el mouse. Ej: http://gabrieled209.webuda.com/cambiarimagen/

CSS:
.imgantes2 {
float:left;
/*deben tener el mismo tamaño que la imagen*/
width:240px;
height:559px;

border:1px solid #000000;
position:relative;
background-position:0px 0px;
background-image:url(antes.jpg)
}

.imgdespues2{
width:240px;
height:150px;/*alto de la parte de la imagen que aperce encima que queres que se vea*/
position:absolute;
background-image:url(despues.jpg);
background-position:16px -0px;
top:0px;
visibility:hidden
}

JavaScript (jQuery):

var p2 = $(".imgantes2");
var pos2 = p2.position();

$('.imgantes2').mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
var posicion = e.pageY - pos2.top;
if (posicion>=409){
$(".imgdespues2").css({
'visibility':'visible',
'background-position':'16px -409px',
'top':'409px'
});
}
else{
$(".imgdespues2").css({
'visibility':'visible',
'background-position':'16px -'+posicion+'px',
'top':posicion+'px'
});
}
$("#info").text("( e.pageX, e.pageY ) - " + pageCoords + "Imgantes pos: "+posicion);
});

$('.imgantes2').mouseout(function(e){
//if ($(e.relatedTarget).attr('class')!='imgantes' || $(e.relatedTarget).attr('class')!='imgdespues')
if (!$(e.relatedTarget).hasClass('imgantes2'))
{
$(".imgdespues2").css('visibility','hidden');
}
});

HTML:

<div class="imgantes2">
<div class="imgdespues2"></div>
</div>

Igual en el codigo funte de la pagina aprece bien. A partir de aca se puede mejorar y cambiar a gusto, acepto crititcas y sugerencias.

No se si estara muy repetido en efecto asi, igual no esta demas para el que lo necesite lo encuentre mas rapido....

Espero que les sirva, saludos!

Última edición por ed-209; 04/03/2010 a las 14:20
  #2 (permalink)  
Antiguo 05/03/2010, 06:44
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: script para "sacar la ropa" ;)

interesante XD, pero prefiero Flash, aunque esta es muy buena alternativa
  #3 (permalink)  
Antiguo 05/03/2010, 07:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: script para "sacar la ropa" ;)

Uh que bueno jaja!! Lo voy a estudiar en una de esas lo aplico por ahi . Hay un muchacho que construye este tipo de alternativas, se llama roman cortes, vi unos trabajos suyos como las meninas 3d y la lata de cocacola con css y me parecieron muy interesantes.

Etiquetas: efecto, javascript, jquery, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:50.