25/08/2014, 06:12
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
continua en el anterior post
Código:
var scrollDiv = {
contenedor: [],
scroll_bar: [],
track: [],
bar: [],
tArea: [],
vTxt: [],
arrastrar: [],
flechas: [],
mouseupDocument: [],
ratonClick : [],
ratonRueda : [],
ratonWheel : [],
ratonDown : [],
cont_Comp : 0,
vTxt_Comp : 0,
trackH : 0,
barH : 0,
initscrollDiv : function(indice) {
scrollDiv.contenedor.push(document.querySelectorAll('.scrollerLateral')[indice]);
scrollDiv.scroll_bar.push(document.querySelectorAll('.scrollbarLatera')[indice]);
scrollDiv.track.push(document.querySelectorAll('.carrilLatera')[indice]);
scrollDiv.bar.push(document.querySelectorAll('.barraLatera')[indice]);
scrollDiv.tArea.push(document.querySelectorAll('.lista')[indice]);
scrollDiv.vTxt.push(document.querySelectorAll('.valorLista')[indice]);
scrollDiv.barraScroll(indice);
},
barraScroll : function(indice) {
if (scrollDiv.vTxt[indice].offsetHeight <= scrollDiv.tArea[indice].offsetHeight) {
scrollDiv.scroll_bar[indice].style.display = 'none';
scrollDiv.contenedor[indice].style.height = scrollDiv.vTxt[indice].offsetHeight + 'px';
return false;
} else {
function altoBarra(p) {
if (p >= 9) {
return 0.2;
} else {
return {
1: 0.9,
2: 0.8,
3: 0.7,
4: 0.6,
5: 0.5,
6: 0.4,
7: 0.3,
8: 0.2
} [p];
}
}
scrollDiv.cont_Comp = scrollDiv.tArea[indice].offsetHeight;
scrollDiv.vTxt_Comp = scrollDiv.vTxt[indice].offsetHeight;
scrollDiv.scroll_bar[indice].style.height = scrollDiv.cont_Comp + 'px';
scrollDiv.trackH = scrollDiv.cont_Comp;
scrollDiv.track[indice].style.height = scrollDiv.trackH + 'px';
scrollDiv.barH = parseInt(scrollDiv.cont_Comp * altoBarra(parseInt(scrollDiv.vTxt_Comp / scrollDiv.cont_Comp)));
scrollDiv.bar[indice].style.height = scrollDiv.barH + 'px';
scrollDiv.scrollEventos(indice);
}
},
scrollEventos : function(indice) {
var offset1 = {}, offset2 = {};
var alto_cont = scrollDiv.vTxt_Comp - scrollDiv.cont_Comp;
var largoCarril = scrollDiv.trackH - scrollDiv.barH;
var vTxtTop = 0;
var barraTop = 0;
// FLECHAS
lib.EventoIE8(scrollDiv.tArea[indice], 'click', scrollDiv.ratonClick[indice] = function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
lib.EventoIE8(document.body, 'keydown', scrollDiv.flechas[indice]);
lib.EventoIE8(document, 'mouseup', scrollDiv.mouseupDocument[indice]);
});
scrollDiv.flechas[indice] = function(evt) {
var keyCode = (evt) ? evt.keyCode : event.charCode;
if (keyCode == 40) {
vTxtTop = parseInt(vTxtTop - 20);
} else if (keyCode == 38) {
vTxtTop = parseInt(vTxtTop + 20);
} else {
return false;
}
lib.EventoCancelar(evt);
lib.EventoParar(evt);
vTxtTop = (Math.abs(vTxtTop) > alto_cont) ? -alto_cont : vTxtTop;
vTxtTop = (vTxtTop <= 0) ? vTxtTop : 0;
scrollDiv.bar[indice].style.top = Math.ceil(((Math.abs(vTxtTop) * (scrollDiv.cont_Comp - scrollDiv.barH)) / alto_cont)) + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
}
// FLECHAS
// RUEDA
lib.EventoIE8(scrollDiv.contenedor[indice], 'mousewheel', scrollDiv.ratonRueda[indice] = function(event) {ratonScroll(event)});
lib.EventoIE8(scrollDiv.contenedor[indice], 'DOMMouseScroll', scrollDiv.ratonWheel[indice] = function(event) {ratonScroll(event)});
function ratonScroll(evt) {
var roll = (evt.wheelDelta) ? evt.wheelDelta : parseInt(-30 * evt.detail);
vTxtTop = (roll > 0) ? parseInt(vTxtTop + 20) : parseInt(vTxtTop - 20);
vTxtTop = (Math.abs(vTxtTop) > alto_cont) ? -alto_cont : vTxtTop;
vTxtTop = (vTxtTop <= 0) ? vTxtTop : 0;
scrollDiv.bar[indice].style.top = Math.ceil(((Math.abs(vTxtTop) * (scrollDiv.cont_Comp - scrollDiv.barH)) / alto_cont)) + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
lib.EventoCancelar(evt);
lib.EventoParar(evt);
}
// RUEDA
// PULSACIÓN en scroll track
lib.EventoIE8(scrollDiv.track[indice], 'mousedown', scrollDiv.ratonDown[indice] = function(evt) {
lib.EventoIE8(document, 'mouseup', scrollDiv.mouseupDocument[indice]);
var evto = (evt.target) ? evt.target : window.event.srcElement;
var posElemento = lib.posicionAbsolutaElemento(this);
var posicionInicialTop = parseInt(posElemento.top);
barraTop = parseInt(lib.cssComputado(scrollDiv.bar[indice], 'top'));
if (evto.parentNode.className == scrollDiv.scroll_bar[indice].className) {
var posev = (evt.pageY) ? evt.pageY : window.event.clientY;
var barArriba = parseInt((posev - posicionInicialTop));
var barAbajo = parseInt(barArriba - scrollDiv.barH);
(function desliza(barraTop) {
vTxtTop = -((barraTop * alto_cont) / largoCarril);
setTimeout(function() {
if (barraTop <= barAbajo) {
scrollDiv.bar[indice].style.top = barraTop + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
barraTop += 10;
desliza(barraTop);
} else if (barraTop >= barArriba) {
scrollDiv.bar[indice].style.top = barraTop + 'px';
scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
barraTop -= 10;
desliza(barraTop);
}
}, 30);
})(barraTop);
}
});
// PULSACIÓN en scroll track
// ARRASTRAR scroll bar
lib.EventoIE8(scrollDiv.bar[indice], 'mousedown', function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
offset1 = {y : (evt.pageY) ? evt.pageY : window.event.clientY};
lib.EventoIE8(document.body, 'mousemove', scrollDiv.arrastrar[indice]);
lib.EventoIE8(document, 'mouseup', scrollDiv.mouseupDocument[indice]);
});
scrollDiv.arrastrar[indice] = function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
offset2 = {y : (evt.pageY) ? evt.pageY : window.event.clientY};
if (offset2.y != offset1.y) {
if (parseInt(lib.cssComputado(scrollDiv.vTxt[indice], 'top')) > 1) {
scrollDiv.vTxt[indice].style.top = '1px';
vTxtTop = 1;
} else if ((parseInt(lib.cssComputado(scrollDiv.bar[indice], 'top')) + (offset2.y - offset1.y)) >= (scrollDiv.cont_Comp - scrollDiv.barH)) {
scrollDiv.bar[indice].style.top = (scrollDiv.cont_Comp - scrollDiv.barH) + 'px';
var scrll = -parseInt(((scrollDiv.trackH - scrollDiv.barH) * alto_cont) / largoCarril);
scrollDiv.vTxt[indice].style.top = scrll + 'px';
vTxtTop = scrll;
} else if (parseInt(((parseInt(lib.cssComputado(scrollDiv.bar[indice], 'top')) + (offset2.y - offset1.y)) * alto_cont) / largoCarril) >= 1){
scrollDiv.bar[indice].style.top = (parseInt(lib.cssComputado(scrollDiv.bar[indice], 'top')) + (offset2.y - offset1.y)) + 'px';
var scrll = -parseInt(((parseInt(lib.cssComputado(scrollDiv.bar[indice], 'top')) + (offset2.y - offset1.y)) * alto_cont) / largoCarril)
scrollDiv.vTxt[indice].style.top = scrll + 'px';
vTxtTop = scrll;
}
offset1.y = offset2.y;
}
}
// ARRASTRAR scroll bar
scrollDiv.mouseupDocument[indice] = function(event) {scrollDiv.elimimarEventos(event, indice);}
},
elimimarEventos : function(evt, indiceObj) {
lib.EventoParar(evt);
lib.EventoEliminarIE8(document.body, 'keydown', scrollDiv.flechas[indiceObj]);
lib.EventoCancelar(evt);
lib.EventoEliminarIE8(document.body, 'mousemove', scrollDiv.arrastrar[indiceObj]);
lib.EventoEliminarIE8(document, 'mouseup', scrollDiv.mouseupDocument[indiceObj]);
}
}
lib.EventoIE8(window, 'load', EmularSelect.initEmularSelect);
</script>
</head>
<body>
continua en el siguiente post |