02/12/2014, 05:13
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
continua en anterior post
Código:
scrollRango : function(evt, _this, rango, indice) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
Range.bocata = rango.querySelector('.bocadillo');
Range.barraProgreso = rango.querySelector('.progreso');
Range.offset1 = {x : evt.pageX};
lib.Evento(_this, 'mousemove', Range.fooDrag = function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
Range.offset2 = {x : evt.pageX};
Range.barraLeft = parseInt(lib.cssComputado(this, 'left'));
if (Range.offset2.x != Range.offset1.x) {
Range.ofset = Range.offset2.x - Range.offset1.x;
if (Range.barraLeft + Range.ofset >= Range.anchoCarril[indice]) {
Range.bocata.textContent = Range.max[indice];
Range.bocata.style.left = (Range.anchoCarril[indice] + Range.posInicialBocadillo) + 'px';
this.style.left = Range.anchoCarril[indice] + 'px';
Range.barraProgreso.style.width = (Range.anchoCarril[indice] + (Range.posInicialBocadillo / 2)) + 'px'; // .progreso
rango.querySelector('.inputTextValue').value = Range.valorBocata[indice];
} else if (Range.barraLeft >= 0) {
if (Range.barraLeft + Range.ofset <= 0) {
Range.desplazamiento = 0;
Range.valorBocata[indice] = Range.min[indice];
Range.valorProgreso = 0;
} else {
Range.desplazamiento = Range.barraLeft + Range.ofset;
var numero = (parseInt(Range.desplazamiento / Range.dividirCarril[indice], 10) + Range.nuevoMin[indice]);
if ((Range.max[indice] - Range.nuevoMin[indice]) % Range.step[indice] != 0) {
Range.valorBocata[indice] = ((numero - Range.nuevoMin[indice]) % Range.step[indice] == 0) ? numero : Range.valorBocata[indice];
} else {
Range.valorBocata[indice] = ((numero + Range.nuevoMin[indice]) % Range.step[indice] == 0) ? numero : Range.valorBocata[indice];
}
Range.valorProgreso = (Range.desplazamiento + (Range.posInicialBocadillo / 2));
}
Range.bocata.textContent = Range.valorBocata[indice];
Range.bocata.style.left = (Range.desplazamiento + Range.posInicialBocadillo) + 'px';
this.style.left = Range.desplazamiento + 'px';
Range.barraProgreso.style.width = Range.valorProgreso + 'px'; // .progreso
rango.querySelector('.inputTextValue').value = Range.valorBocata[indice];
}
Range.offset1.x = Range.offset2.x;
}
});
lib.Evento(_this, 'mouseout', function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
lib.EventoEliminar(this, 'mousemove', Range.fooDrag);
});
lib.Evento(_this, 'mouseup', function(evt) {
lib.EventoCancelar(evt);
lib.EventoParar(evt);
lib.EventoEliminar(this, 'mousemove', Range.fooDrag);
});
}
}
lib.Evento(document, 'DOMContentLoaded', Range.initRange);
</script>
</head>
<body>
<div class="contenedorRango">
<div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
<div class="rango">
<div class="bocadillo"></div>
<div class="scrollbar">
<div class="carril">
<input type="text" class="inputTextValue" value="0" data-min="0" data-max="30" data-step="1" data-inicia="1" />
<div class="barra"></div><div class="progreso"></div>
</div>
</div>
</div>
</div>
<div class="contenedorRango">
<div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
<div class="rango">
<div class="bocadillo"></div>
<div class="scrollbar">
<div class="carril">
<input type="text" class="inputTextValue" value="2" data-min="2" data-max="10" data-step="3" data-inicia="0" />
<div class="barra"></div><div class="progreso"></div>
</div>
</div>
</div>
</div>
<div class="contenedorRango">
<div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
<div class="rango">
<div class="bocadillo"></div>
<div class="scrollbar">
<div class="carril">
<input type="text" class="inputTextValue" value="10" data-min="10" data-max="20" data-step="5" data-inicia="0" />
<div class="barra"></div><div class="progreso"></div>
</div>
</div>
</div>
</div>
<div class="contenedorRango">
<div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
<div class="rango">
<div class="bocadillo"></div>
<div class="scrollbar">
<div class="carril">
<input type="text" class="inputTextValue" value="10" data-min="10" data-max="20" data-step="3" data-inicia="2" />
<div class="barra"></div><div class="progreso"></div>
</div>
</div>
</div>
</div>
<div class="contenedorRango">
<div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
<div class="rango">
<div class="bocadillo"></div>
<div class="scrollbar">
<div class="carril">
<input type="text" class="inputTextValue" value="10" data-min="10" data-max="20" data-step="1" data-inicia="5" />
<div class="barra"></div><div class="progreso"></div>
</div>
</div>
</div>
</div>
<div class="contenedorRango">
<div class="valorRango"><span class="minimo"></span><span class="maximo"></span></div>
<div class="rango">
<div class="bocadillo"></div>
<div class="scrollbar">
<div class="carril">
<input type="text" class="inputTextValue" value="1" data-min="1" data-max="15" data-step="1" data-inicia="0" />
<div class="barra"></div><div class="progreso"></div>
</div>
</div>
</div>
</div>
</body>
</html>
|