Bienvenid@s, hoy os mostraré como hacer un efecto animado de desplazamiento sobre la página al pulsar y soltar el mouse, este tipo de efecto-utilidad es algo habitual en el tipo de pantallas táctiles como pueden ser móviles, ebooks, tablets, etc ..., para ello recurriremos a los eventos mousedown(cuando pulsamos el mouse) y mouseup(cuando dejamos de pulsarlo).
En el siguiente ejemplo utiliza el cursor para desplazarte sobre la página, haz click sobre la página, manten pulsado, desplázate hacia arriba o hacia abajo y suelta ...
Código del ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<title>Efecto animado de desplazamiento sobre la página al pulsar y soltar el mouse con Jquery</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#box-window-content").mousedown(function(u){
getTop = u.pageY;
getLeft = u.pageX;
});
$("#box-window-content").mouseup(function(e){
if (getTop < e.pageY && getLeft < e.pageX)
{
desplazamiento_top = $("#box-window").scrollTop()+$("#box-window").height();
desplazamiento_left = $("#box-window").scrollLeft()+$("#box-window").width();
$("#box-window").animate({scrollTop: desplazamiento_top, scrollLeft: desplazamiento_left});
}
if (getTop < e.pageY && getLeft > e.pageX)
{
desplazamiento_top = $("#box-window").scrollTop()+$("#box-window").height();
desplazamiento_left = $("#box-window").scrollLeft()-$("#box-window").width();
$("#box-window").animate({scrollTop: desplazamiento_top, scrollLeft: desplazamiento_left});
}
if (getTop > e.pageY && getLeft > e.pageX)
{
desplazamiento_top = $("#box-window").scrollTop()-$("#box-window").height();
desplazamiento_left = $("#box-window").scrollLeft()-$("#box-window").width();
$("#box-window").animate({scrollTop: desplazamiento_top, scrollLeft: desplazamiento_left});
}
if (getTop > e.pageY && getLeft < e.pageX)
{
desplazamiento_top = $("#box-window").scrollTop()-$("#box-window").height();
desplazamiento_left = $("#box-window").scrollLeft()+$("#box-window").width();
$("#box-window").animate({scrollTop: desplazamiento_top, scrollLeft: desplazamiento_left});
}
});
});
</script>
<style>
#box-window
{
cursor: pointer;
width: 500px;
height: 500px;
border: 1px solid grey;
overflow: scroll;
}
#box-window-content
{
width: 100%;
height: 2000px;
background: url(http://1.bp.blogspot.com/-Qla81wq__Dc/Uojj1Jgk5dI/AAAAAAAAFo8/rOjBNhgUxjg/s1600/jquery.jpg);
background-repeat: repeat;
}
</style>
</head>
<body>
<center>
<h1>Efecto animado de desplazamiento sobre la página al pulsar y soltar el mouse con Jquery</h1>
<h3>By <a href="http://jquery-manual.blogspot.com" target="_blank">http://jquery-manual.blogspot.com</a></h3>
<div id="box-window">
<div id="box-window-content">
</div>
</div>
</center>
</body>
</html>
No hay comentarios:
Publicar un comentario