 |
Andrés Fernández |
 |
5/8/2008 |
 |
482 |
 |
0 |
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
A continuación mostraremos el código y un ejemplo de un scroll sencillo en javascript. Lo haremos sin usar el atributo id para que sea fácil de usar varias veces en la misma página, y con un css básico que luego cada uno podrá modificar para darle el aspecto que más le guste. Posiblemente en el futuro (quizá luego de escribir algo sobre drag and drop), volvamos sobre este artículo para agregarle las barras o que responda a la rueda del mouse, pero ahora sólo utilizaremos botones para subir y bajar la zona scrolleable.
Este es el ejemplo y este es el código utilizado:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.contenedorExt{ position:relative; height:307px;width:323px; margin:10px; background-color:gray;border:1px solid black}
.contenedor{width:290px; height:300px; overflow:hidden;padding:3px; border-right:1px solid black; background-color:white}
.arriba{ width:10px; height:10px; background-color:red; border:1px solid black; position:absolute; left:305px; top:10px; cursor:pointer;}
.abajo{ width:10px; height:10px; background-color:red; border:1px solid black; position:absolute; left:305px; bottom:10px;cursor:pointer;}
</style>
<script>
function getElementsByClassName(rel){
var col=[];
var tCol=document.getElementsByTagName('*');
for(var ii=0;ii<tCol.length;ii++)
if(tCol[ii].className==rel)
col.push(tCol[ii])
return col;
}
var EvRegister=[];
function addEvent(obj, evType, fn, useCapture){
if(obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
}else if(obj.attachEvent){
obj.attachEvent("on"+evType, fn);
}else{
obj['on'+evType]=fn;
}
var ev={_obj:obj,_evType:evType,_fn:fn,_useCapture:useCapture};
EvRegister.push(ev);
}
function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
} else if (obj.detachEvent){
obj.detachEvent("on"+evType, fn);
} else {
obj['on'+evType]=function(){};
}
var i,l;
for ( i= 0, l=EvRegister.length; i < l ; i++) {
if (EvRegister[i]._evType== evType && EvRegister[i]._obj==obj && EvRegister[i]._fn==fn && EvRegister[i]._useCapture==useCapture) {
EvRegister.splice(i, 1);
break;
}
}
}
function unregisterAllEvents() {
while (EvRegister.length > 0) {
removeEvent(EvRegister[0]._obj,EvRegister[0]._evType,EvRegister[0]._fn,EvRegister[0]._useCapture);
}
}
function subir(e){
var e=e || window.event;
var obj=e.target || e.srcElement;
obj.intervalo=setInterval(function(){
var capa=obj.parentNode.firstChild;
capa.scrollTop-=2;
capa=null;
},5);
addEvent(obj, 'mouseout', parar, false);
}
function bajar(e){
var e=e || window.event;
var obj=e.target || e.srcElement;
obj.intervalo=setInterval(function(){
var capa=obj.parentNode.firstChild;
capa.scrollTop+=2;
capa=null;
},5);
addEvent(obj, 'mouseout', parar, false);
}
function parar(e){
var e=e || window.event;
var obj=e.target || e.srcElement;
clearInterval(obj.intervalo);
obj.intervalo=null;
}
window.onload=function(){
var botsArriba=getElementsByClassName('arriba');
var botsAbajo=getElementsByClassName('abajo');
for(var ii=0;ii<botsArriba.length;ii++){
addEvent(botsArriba[ii], 'mouseover', subir, false);
addEvent(botsAbajo[ii], 'mouseover', bajar, false);
}
}
window.onunload=function(){
unregisterAllEvents();
var botsArriba=getElementsByClassName('arriba');
var botsAbajo=getElementsByClassName('abajo');
for(var ii=0;ii<botsArriba.length;ii++){
botsArriba[ii]=null;
botsAbajo[ii]=null;
}
}
</script>
</head>
<body>
<div class="contenedorExt"><div class="contenedor">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is
a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout. The point of using Lorem Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English. Many desktop publishing
packages and web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes
on purpose (injected humour and the like).Lorem Ipsum is simply dummy text
of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it? It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the
like).Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum. Why do we use it? It is a long established fact that
a reader will be distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English. Many desktop publishing packages
and web page editors now use Lorem Ipsum as their default model text, and a
search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes
on purpose (injected humour and the like).Lorem Ipsum is simply dummy text
of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it? It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the
like).</div><div class="arriba"></div><div class="abajo"></div></div>
</body>
</html>
|
|
|
volver |
|
|
|
|
