Mover una Capa con OnMouseWheel

Probemos un sencillo ejemplo JavaScript del evento onmousewheel (rueda del mouse) para mover una capa:

<html>
<head>
<script type=”text/javascript”>
<!– Copyleft 2006 – 2009, ScriptShow – scriptshow@hotmail.com –>
<!– Feel free to use if you leave this header intact! –>
<!–
pos = 0;

function move(delta){
if (document.all){document.all(“lyr”).style.top = pos}
if (document.getElementById && !document.all){document.getElementById(“lyr”).style.top = pos}
if (delta < 0 && pos >= 000) pos-=2;
else
if (delta > 0 && pos <= 400) pos+=2;
}

function wheel(event){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta){delta = event.wheelDelta/120;
if (window.opera) delta = -delta}
else
if (event.detail){delta = -event.detail/3}
if (delta) {move(delta)}
}

if (window.addEventListener)
window.addEventListener(‘DOMMouseScroll’, wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
// –>
</script>
</head>
<body style=”overflow:hidden”>
<font face=”Arial” size=”5″>
<pre>      
[ C O N T E N I D O :: 1 ]    | |    :: S E C C I O N [1] ::

[ C O N T E N I D O :: 2 ]    | |    :: S E C C I O N [2] ::
            
[ C O N T E N I D O :: 3 ]    | |    :: S E C C I O N [3] ::

[ C O N T E N I D O :: 4 ]    | |    :: S E C C I O N [4] ::
</pre>
</font>
<div id=”lyr” style=”position:absolute;left:0px;top:0px;width:103%;height:49%;font-family:Verdana;background:#000000;color:#CC88FF;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7″><h2>[ C O N T E N I D O – O P A C I T Y – 70 ]</h2></div>
</body>
</html>

Podéis cambiarle el color, tamaño, forma, opacidad, etc. Con pocos Kb. es posible…, y algo de imaginación.

Mover una Capa con OnMouseWheel

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s