buscodescargas.com » JavaScript » Efecto Scanner en Imagen

Efecto Scanner en Imagen

El de hoy no es mio. Andaba farfullando por un foro y me encantó un script compartido por el amigo Gabriel. tanto es así que me permito publicarlo aquí.

Podéis ver la función en éste enlace…

====================
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:

==========================

Y… por sí os ha quedado un buen sabor de boca y ganas de ver más efectos alucinantes, no dejéis de ver la página de Román Cortés…

Ah!...aceptamos invitación a café...!!

Compartenos...