Foros del Web » Programando para Internet » Jquery »

[APORTE] efectos sin jquery

Estas en el tema de [APORTE] efectos sin jquery en el foro de Jquery en Foros del Web. Lightbox ----> compatibilidad : todos los navegadores modernos incluido ie8 Código: <!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; ...

  #31 (permalink)  
Antiguo 18/10/2013, 14:48
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Lightbox ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:
<!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=utf-8" />
<title></title>
<style media="screen" type="text/css">

* {
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
}



html {
	width: 100%;
	height: 100%;
}



body {
	font-size: 100%;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	background-color: rgb(121, 118, 118);
}



div.centrar {
	width: 40em;
	margin: 0 auto;
}



div.centrar > * {
	text-align: center;
	padding: 0.5em 0;
}



div.lbox {
	height: auto;
}



div.lbox > img {
	width: auto;
	max-height: 9.25em;
	max-width: 13.88em;
	margin: 0 1em;
	border: 0.21em solid rgb(158, 158, 158);
	cursor: pointer;
}



/* LIGHTBOX */

div#capaOpacidad {
	display: none;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	background-color: #000;
	opacity: 0.9;
	filter: alpha(opacity=90);
	z-index: 100;
	position: fixed;
	top: 0;
	left: 0;
}



div#lightbox-casero {
	position: absolute;
	display: none;
	text-align: center;
	top: 0;
	left: 0;
	z-index: 102;
	width: 100%;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno {
	position: relative;
	background-color: rgb(255, 255, 255);
	width: 20.335em;
	height: 20.335em;
	margin: 0 auto;
	border-radius: 0.4em 0.4em;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno > div.lightbox-casero-contenedor {
	line-height: 0;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno > div.lightbox-casero-contenedor > img.imagenActual {
	width: auto;
	height: auto;
	top: 0.54em;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno > div.loading {
	position: absolute;
	top: 45%;
	left: 0;
	width: 100%;
	text-align: center;
	display: none;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno > span.bt-izq, div#lightbox-casero > div.lightbox-casero-contenedorExterno > span.bt-der {
	position: absolute;
	top: 47%;
	width: 2.14em;
	height: 2.05em;
	display: none;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno:hover > span.bt-izq {
	background: url('./lightbox_img/prev.png') no-repeat center;
	left: 0.5em;
	cursor: pointer;
}



div#lightbox-casero > div.lightbox-casero-contenedorExterno:hover > span.bt-der {
	background: url('./lightbox_img/next.png') no-repeat center;
	right: 0.5em;
	cursor: pointer;
}


/* LIGHTBOX */

</style>
<script type="text/javascript">

var lib = {

// ---------- VALORES QUE SE PUEDEN EDITAR --------------


tiempoExpandirImg : 600, // tiempo, en milisegundos, que tarda en expandirse el contenedor de la imagen
tiempoFade : 400, // tiempo, en milisegundos, que tarda en hacer el fadein de la imagen
tiempoFadeOcultar : 600, // tiempo, en milisegundos, que tarda en hacer el fadeout de la imagen
respetarResolucionPantalla : true, // adapta las imágenes a la resolución de pantalla (true/false)
agrupadas : true, // agrupa la imágenes para poder acceder a la imagen siguiente o anterior a la actual (true/false)
tamInicialBloque : 400, // dimensión, en px, desde la que empezará el escado del bloque que contiene a la imagen


// ---------- VALORES QUE SE PUEDEN EDITAR --------------



// =============== mini librería =================


Evento : function(elemento, nomevento, fnc) {

	if (elemento.addEventListener) {

		elemento.addEventListener(nomevento, fnc, false);

    	} else if (elemento.attachEvent) {

		elemento.attachEvent('on' + nomevento, fnc);

  	}
},





EventoEliminar : function(elemento, nomevento, fnc) {

	if (elemento.removeEventListener) {

		elemento.removeEventListener(nomevento, fnc, false);

    	} else if (elemento.detachEvent) {

		elemento.detachEvent('on' + nomevento, fnc);

  	}

},




cssComputado : function(obj, styleProp, NOunidades) {

	if (obj == null) { return 0; }

    if (window.getComputedStyle) {

        var valor = window.getComputedStyle(obj, null)[styleProp];

    } else if (obj.currentStyle) {

        var valor = (/(em)/.test(obj.currentStyle[styleProp])) ? parseInt(obj.currentStyle[styleProp], 10) * 16 : obj.currentStyle[styleProp];
    }

    return valor;
},




obtenerDiana : function(event) {

	return event.target || event.srcElement;
},




editarRegla : function(posRegla) {
var regla;

  	if (document.all) {

    		regla = document.styleSheets[0].rules;

  	} else {

    		regla = document.styleSheets[0].cssRules;

	}

	return regla[parseInt(posRegla, 10)];

},





tamanoFuente : function() {

var ancho = lib.obtenerAnchoNavegador() * 0.09;

var tamFuente = parseFloat(16 + (16 * ((ancho-100)/100)));

	return tamFuente;
},





tamanoFuenteBody : function(pos) {

var posRegla = pos;
var regla = lib.editarRegla(posRegla);
	
	regla.style.fontSize = lib.tamanoFuente() + 'px';
},





obtenerAnchoNavegador : function() {

	if (window.innerWidth) {

		return window.innerWidth;

	} else if (document.documentElement && document.documentElement.clientWidth != 0) {

		return document.documentElement.clientWidth;

	} else if (document.body) {

		return document.body.clientWidth;
	}
	
	return 0;
},



alturaScroll : function() {

	return self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop);
},

// ===================== mini librería ======================


w_previousImg : 0,
h_previousImg : 0,
fncCerrar : function() {},
fncNavIzq : function() {},
fncNavDer : function() {},
h_res : ('innerHeight' in window) ? window.innerHeight : document.documentElement.clientHeight,
arrImagenes : []

};



lib.tamanoFuenteBody(2); // apunta al selector body


lib.Evento(window, 'load', cargar);



function cargar() {

	for (var i = 0, n_grupos = document.querySelectorAll('.lbox'); i < n_grupos.length; i++) {

		lib.arrImagenes[i] = [];

		for (var j = 0, img = n_grupos[i].getElementsByTagName('img'); j < img.length; j++) {

// precarga de imágenes

			lib.arrImagenes[i][j] = new Image();
			lib.arrImagenes[i][j].src = img[j].alt;

// precarga de imágenes


			(function(i, j){
				lib.Evento(img[j], 'click', function() {escalarImg(lib.arrImagenes[i][j], j, i)});
			})(i, j);

		}

	}

	lib.Evento(window, 'resize', function() { lib.tamanoFuenteBody(2); }); // apunta al selector body

}





function aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt) {

	var agrandar_horizontal = w_prevImg + ((w_imgActual - w_prevImg) * avance);
	lbCasero_contedorExt.style.width = agrandar_horizontal + 'px';

}





function aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll) {

	var agrandar_vertical = h_prevImg + ((h_imgActual - h_prevImg) * avance);
	lbCasero_contedorExt.style.height = agrandar_vertical + 'px';
	var diferencia_vertical = agrandar_vertical - h_prevImg;
	var desplaza_vertical = (posTop - (diferencia_vertical/2) >= posicionScroll) ? posTop - (diferencia_vertical/2) : posicionScroll;
	lbCasero.style.top = parseFloat(desplaza_vertical/lib.tamanoFuente()).toFixed(3) + 'em';


}





function disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt) {

	var disminuir_horizontal = w_prevImg - ((w_prevImg - w_imgActual) * avance);
	lbCasero_contedorExt.style.width = disminuir_horizontal + 'px';

}






function disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll) {

	var disminuir_vertical = h_prevImg - ((h_prevImg - h_imgActual) * avance);
	lbCasero_contedorExt.style.height = disminuir_vertical + 'px';
	var diferencia_vertical = h_prevImg - disminuir_vertical;
	var desplaza_vertical = (posTop + (diferencia_vertical/2) >= posicionScroll) ? posTop + (diferencia_vertical/2) : posicionScroll;
	lbCasero.style.top = parseFloat(desplaza_vertical/lib.tamanoFuente()).toFixed(3) + 'em';

}
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 23/04/2014 a las 15:34
  #32 (permalink)  
Antiguo 18/10/2013, 15:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

continua en el anterior post

Código:
function mostrarImg(laImg, empieza, w, h) {

	document.querySelector('.lightbox-casero-contenedorExterno').style.overflow = '';

	var box = document.querySelector('.imagenActual');
	box.src = laImg.src;
	box.style.width = w + 'px';
	box.style.height = h + 'px';
	box.parentNode.style.lineHeight = parseInt(h + 20, 10) + 'px';

	(function opacidadImg(empieza, transOpacidad) { 
			
		setTimeout(function(){

			var ahora = new Date().getTime();

			if (transOpacidad <= 100) {

				if ((ahora - empieza) < lib.tiempoFade) {

					var avance = ((ahora - empieza) / lib.tiempoFade);
					var opacidad = transOpacidad + ((100 - transOpacidad) * avance);
					box.style.opacity = parseFloat(opacidad/100).toFixed(2);
					box.style.filter = 'alpha(opacity =' + opacidad + ')';
    				opacidadImg(empieza, transOpacidad);

				} else {

					box.style.opacity = '';
					box.style.filter = 'alpha(opacity ="")';
					if (lib.agrupadas) {

						document.querySelector('.bt-izq').style.display = 'block';
						document.querySelector('.bt-der').style.display = 'block';
					}	

				}
			} 

		}, 1);


	})(empieza, 50);

	
	box.style.display = 'inline';

}






function escalarImg(urlIMG, indiceIMG, grupo) {

	var laImg = urlIMG;

	if (lib.respetarResolucionPantalla) {

		var w_imgReal = parseInt(laImg.width, 10);
		var h_imgReal = parseInt(laImg.height, 10);
		var w_imgActual = parseInt(w_imgReal * parseInt((lib.h_res * 100)/h_imgReal, 10)/100)-50;
		var h_imgActual = parseInt(h_imgReal * parseInt((lib.h_res * 100)/h_imgReal, 10)/100)-50;

		if (w_imgActual > w_imgReal || h_imgActual > h_imgReal) {

			w_imgActual = w_imgReal;
			h_imgActual = h_imgReal;
		}

	} else {

		var w_imgActual = parseInt(laImg.width, 10);
		var h_imgActual = parseInt(laImg.height, 10);

	}
	

	var tamW = parseInt(w_imgActual-20);
	var tamH = parseInt(h_imgActual-20);


	document.querySelector('.loading').style.display = 'block';


	if (lib.agrupadas) {

		if (lib.cssComputado(document.getElementById('capaOpacidad'), 'display') == 'none') {

			document.getElementById('capaOpacidad').style.display = 'block';
			lib.Evento(document, 'click', lib.fncCerrar = function(event) { ocultar(event, document.getElementById('capaOpacidad'), document.getElementById('lightbox-casero')) });

		} else {

			lib.EventoEliminar(document.querySelector('.bt-izq'), 'click', lib.fncNavIzq);
			lib.EventoEliminar(document.querySelector('.bt-der'), 'click', lib.fncNavDer);
			document.querySelector('.bt-izq').style.display = 'none';
			document.querySelector('.bt-der').style.display = 'none';

		}


// FLECHAS DE NAVEGACIÓN
 
		var anteriorIMG = (indiceIMG == 0) ? (lib.arrImagenes[grupo].length-1) % lib.arrImagenes[grupo].length : (indiceIMG - 1) % lib.arrImagenes[grupo].length;

		lib.Evento(document.querySelector('.bt-izq'), 'click', lib.fncNavIzq = function() {escalarImg(lib.arrImagenes[grupo][anteriorIMG], anteriorIMG, grupo)});


		var siguienteIMG = (indiceIMG + 1) % lib.arrImagenes[grupo].length;

		lib.Evento(document.querySelector('.bt-der'), 'click', lib.fncNavDer = function() {escalarImg(lib.arrImagenes[grupo][siguienteIMG], siguienteIMG, grupo)});

// FLECHAS DE NAVEGACIÓN


	} else {

		document.getElementById('capaOpacidad').style.display = 'block';
		lib.Evento(document, 'click', lib.fncCerrar = function(event) { ocultar(event, document.getElementById('capaOpacidad'), document.getElementById('lightbox-casero')) });

	}



	document.querySelector('.imagenActual').style.display = 'none';

	lib.w_previousImg = (lib.w_previousImg == 0) ? lib.tamInicialBloque : lib.w_previousImg;
	lib.h_previousImg = (lib.h_previousImg == 0) ? lib.tamInicialBloque : (lib.h_previousImg > lib.h_res) ? lib.h_res : lib.h_previousImg;


	var posicionScroll = lib.alturaScroll()

	var posTop = parseInt((((lib.h_res - lib.h_previousImg) / 2) + posicionScroll), 10);

	var lbCasero = document.getElementById('lightbox-casero');
	lbCasero.style.top = posTop + 'px';
	lbCasero.style.left = 0;
	lbCasero.style.display = 'block';
	

	var lbCasero_contedorExt = document.querySelector('.lightbox-casero-contenedorExterno');
	lbCasero_contedorExt.style.width = lib.w_previousImg + 'px';
	lbCasero_contedorExt.style.height = lib.h_previousImg + 'px';
	lbCasero_contedorExt.style.overflow = 'hidden';


	document.querySelector('.loading').style.display = 'none';


	var nuevotEmpieza = new Date().getTime();


	(function escalarImagen(w_prevImg, h_prevImg) {

		setTimeout(function() {

			var nuevo_ahora = new Date().getTime();

			if (w_prevImg < w_imgActual && h_prevImg < h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);

				} else {

					var avance = 1;
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else if (w_prevImg > w_imgActual && h_prevImg < h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}




			} else if (w_prevImg < w_imgActual && h_prevImg > h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}




			} else if (w_prevImg > w_imgActual && h_prevImg > h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else if (w_prevImg > w_imgActual && h_prevImg == h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 23/04/2014 a las 06:48
  #33 (permalink)  
Antiguo 18/10/2013, 15:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

continua en el anterior post

Código:
} else if (w_prevImg < w_imgActual && h_prevImg == h_imgActual) {

				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else if (w_prevImg == w_imgActual && h_prevImg < h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else if (w_prevImg == w_imgActual && h_prevImg > h_imgActual) {

				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else {

				mostrarImg(laImg, nuevo_ahora, tamW, tamH);
			}
						
		}, 1);


	})(lib.w_previousImg, lib.h_previousImg);

	lib.w_previousImg = w_imgActual;
	lib.h_previousImg = h_imgActual;

}






function ocultar(e, capaOpacidad, lbCasero) {

	var evt = lib.obtenerDiana(e);

	if (evt.id == 'capaOpacidad' || evt.id == 'lightbox-casero') {

		var opac = 100;
		var fondoOpacado = capaOpacidad;
		var opacCSS = parseInt(parseFloat(lib.cssComputado(fondoOpacado, 'opacity')).toFixed(2) * 100, 10) || fondoOpacado.filters.alpha.opacity;
		var empieza = new Date().getTime();

		(function ocultaImg(empieza, transOpacidad) { 

			setTimeout(function(){

				var ahora = new Date().getTime();

				if (transOpacidad >= 0) {

					if ((ahora - empieza) < lib.tiempoFadeOcultar) {

						var avance = ((ahora - empieza) / lib.tiempoFadeOcultar);
						var opacidad = transOpacidad - ((transOpacidad - 0) * avance);
						var opacidad2 = opacCSS - ((opacCSS - 5) * avance);
						lbCasero.style.opacity = parseFloat(opacidad / 100).toFixed(2);
						fondoOpacado.style.opacity = parseFloat(opacidad2 / 100).toFixed(2);
						lbCasero.style.filter = 'alpha(opacity =' + opacidad + ')';
						fondoOpacado.style.filter = 'alpha(opacity =' + opacidad2 + ')';
						ocultaImg(empieza, transOpacidad);

					} else {

						lbCasero.style.display = 'none';
						lbCasero.style.opacity = '';
						lbCasero.style.filter = 'alpha(opacity = "")';
						fondoOpacado.style.display = 'none';
						fondoOpacado.style.opacity = opacCSS / 100;
						fondoOpacado.style.filter = 'alpha(opacity =' + opacCSS + ')';
						document.querySelector('.loading').style.display = '';
						lib.w_previousImg = 0,
						lib.h_previousImg = 0;

						if (lib.agrupadas) {


							lib.EventoEliminar(document.querySelector('.bt-izq'), 'click', lib.fncNavIzq);
							lib.EventoEliminar(document.querySelector('.bt-der'), 'click', lib.fncNavDer);
							document.querySelector('.bt-izq').style.display = 'none';
							document.querySelector('.bt-der').style.display = 'none';

						}

					}
				}

			}, 1);


		})(empieza, opac);

		lib.EventoEliminar(document, 'click', lib.fncCerrar);

	}

}
</script>
</head>
<body>

<div class="centrar">

	<div class="lbox">

		<img src="./lightbox_img/kod1t.jpg" alt="./lightbox_img/kod1.jpg" />
		<img src="./lightbox_img/kod2t.jpg" alt="./lightbox_img/kod2.jpg" />
		<img src="./lightbox_img/kod3t.jpg" alt="./lightbox_img/kod3.jpg" />
		<img src="./lightbox_img/kod4t.jpg" alt="./lightbox_img/kod4.jpg" />

	</div>


	<div class="lbox">

		<img src="./lightbox_img/kod2t.jpg" alt="./lightbox_img/kod2.jpg" />
		<img src="./lightbox_img/kod4t.jpg" alt="./lightbox_img/kod4.jpg" />
		<img src="./lightbox_img/kod1t.jpg" alt="./lightbox_img/kod1.jpg" />
		<img src="./lightbox_img/kod3t.jpg" alt="./lightbox_img/kod3.jpg" />

	</div>

</div>



<!-- lightbox -->

<div id="capaOpacidad"></div>

<div id="lightbox-casero">

	<div class="lightbox-casero-contenedorExterno">

		<div class="lightbox-casero-contenedor">

			<img src="./lightbox_img/imgdefecto.gif" class="imagenActual" alt="viendo" />

		</div>

		<div class="loading"><img src="./lightbox_img/cargandoImgs.gif" alt="cargando" /></div>
		<span class="bt-izq"></span>
		<span class="bt-der"></span>

	</div>

</div>

<!-- lightbox -->

</body>
</html>
algunas observaciones

* imágenes del lightbox
  • src --> url de la imagen en miniatura
  • alt --> url de la imagen a tamaño real

* el código tienes 4 imágenes inherentes
  • cargandoImgs.gif (imagen que simula la carga de imágenes)
  • imgdefecto.gif (una imagen gif transparente de 1px por 1px)
  • prev.png y next.png (imágenes para la navegación entre imágenes agrupadas)

* hay varias variables editables
  • tiempoExpandirImg : 600, // tiempo, en milisegundos, que tarda en expandirse el contenedor de la imagen
  • tiempoFade : 400, // tiempo, en milisegundos, que tarda en hacer el fadein de la imagen
  • tiempoFadeOcultar : 600, // tiempo, en milisegundos, que tarda en hacer el fadeout de la imagen
  • respetarResolucionPantalla : true, // adapta las imágenes a la resolución de pantalla (true/false)
  • agrupadas : true, // agrupa la imágenes para poder acceder a la imagen siguiente o anterior a la actual (true/false)
  • tamInicialBloque : 400, // dimensión, en px, desde la que empezará el escado del bloque que contiene a la imagen
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 03/01/2015 a las 07:21
  #34 (permalink)  
Antiguo 26/10/2013, 14:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Autocomplete----> compatibilidad : todos los navegadores modernos incluido ie8

Código:
<!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"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=utf-8"/>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	position: relative;
}

input.autocomplete {
	width: 200px;
	font: 1em Verdana;
}



#contenedorOpt {
	min-width: 200px;
	width: auto;
	display: none;
	background: rgb(255, 255, 255);
	border: 1px solid rgb(120,120,120);
	text-align: left;
	position: absolute;
	z-index: 100;
}



#contenedorOpt ol {
	list-style-type: none;
}



#contenedorOpt li {
	font: 1em verdana;
	text-align: left;
}



#contenedorOpt li.noseleccionado {
	color: rgb(0, 0, 0);
	padding: 2px 5px;
}



#contenedorOpt li.seleccionado {
	border: 1px solid rgb(95, 82, 82);
	border-radius: 5px;
	margin: 1px;
	padding: 0 3px;
	cursor: default;
	background: rgb(219, 215, 215);
	color: rgb(9, 8, 8);
}



#contenedorOpt span {
	color: rgb(0, 0, 0);
	font-weight: bold;
	padding: 0 28px;
}
</style>
<script type="text/javascript">
var lib = {

	Evento : function(elemento, nomevento, fnc) {

		if (elemento.addEventListener) {

			elemento.addEventListener(nomevento, fnc, false);

	    	} else if (elemento.attachEvent) {

			elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento, window.event);});

	  	}
	},




	EventoCancelar : function (evt) {

		var evt = evt || window.event;

		if (evt.preventDefault) {

			evt.preventDefault();

		} else {

			evt.returnValue = false;
		}
	},




	elemAdyacente : function(elm, adj) {

		if (adj == 'nxt') {

			var elemento = elm.nextElementSibling || elm.nextSibling.nextSibling;

		} else {

			var elemento = null;
		}


		if (elemento == null) {

			return null;

		} else {

			return elemento;
		}
	},



	posicionAbsolutaElemento : function(elem) {

        if (!elem) return { top : 0, left : 0 };

        var x = 0;
        var y = 0;

        while (elem.offsetParent) {

            x += elem.offsetLeft;
            y += elem.offsetTop;
            elem = elem.offsetParent;
        }

        return {top : y, left : x};
    },
}



var autoCompletado = {

	elTxtBoxRaton : '',

	creaAjax: function() {

		var ajax = new XMLHttpRequest();
		return ajax;
	},


	ajax : null,


	init: function() {

		var inpt = document.querySelectorAll('.autocomplete');

		for (var i = 0; i < inpt.length; i++) {

    		lib.Evento(inpt[i], 'keyup', function(event) {autoCompletado.autoCompletaPulsacion(event, this)});
			lib.Evento(inpt[i], 'paste', function() {autoCompletado.copypasteRaton(this)});
   			lib.Evento(inpt[i], 'keydown', autoCompletado.pegarConEnteryTab);
    		lib.Evento(inpt[i], 'blur', autoCompletado.Cerrar);
		}

		lib.Evento(document.getElementById('contenedorOpt'), 'mouseover', function() {autoCompletado.Seleccionar(this)});
	},



	autoCompletaPulsacion: function (ev, elTxtBox) {

		autoCompletado.elTxtBoxRaton = elTxtBox;
		var str = elTxtBox.value;
		var elDiv = document.getElementById('contenedorOpt');

		if (str.length <= 2) {

			elDiv.innerHTML = '';
			elDiv.style.display = 'none';
			return;
		}

		var keyCode = (ev) ? ev.keyCode : ev.charCode;

		if (keyCode == 40) { // flecha abajo

			autoCompletado.BajaOpt(elDiv);

		} else if (keyCode == 38) { // flecha arriba

			autoCompletado.SubeOpt(elDiv);

		} else if (keyCode == 13) { // enter

			lib.EventoCancelar(ev);

		} else {

			var PosElemento = lib.posicionAbsolutaElemento(elTxtBox);
			var posicionInicialLeft = parseInt(PosElemento.left);
			var posicionInicialTop = parseInt(PosElemento.top);

			lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '<img src="./precarga.gif" />';

			autoCompletado.ajax = autoCompletado.creaAjax();

			var url = 'SelecUsuarios.php?busca=' + str;
			autoCompletado.ajax.open('GET', url, true);

			autoCompletado.ajax.onreadystatechange = function() {

				if (!autoCompletado.ajax || autoCompletado.ajax == null) { return; }

				if (autoCompletado.ajax.readyState == 4) {

					if (autoCompletado.ajax.status == 200) {

						elDiv.innerHTML = autoCompletado.ajax.responseText;
						lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '';
						autoCompletado.Desplieaga(posicionInicialLeft, posicionInicialTop, elDiv);
						autoCompletado.ajax.onreadystatechange = function(){};
						autoCompletado.ajax.abort();
						autoCompletado.ajax = null;

					}
				}
			}

			autoCompletado.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			autoCompletado.ajax.send(null);
			return;
		}
	},



	copypasteRaton: function(elTxtBox) {

		setTimeout(function() {autoCompletado.autoCompletaRaton(elTxtBox)}, 0);
	},




	autoCompletaRaton: function (elTxtBox) {

		autoCompletado.elTxtBoxRaton = elTxtBox;
		var str = elTxtBox.value;
		var elDiv = document.getElementById('contenedorOpt');

		if (str.length <= 2) { return; }

		var PosElemento = lib.posicionAbsolutaElemento(elTxtBox);
		var posicionInicialLeft = parseInt(PosElemento.left);
		var posicionInicialTop = parseInt(PosElemento.top);

		lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '<img src="./precarga.gif" />';

		autoCompletado.ajax = autoCompletado.creaAjax();

		var url = 'SelecUsuarios.php?busca=' + str;
		autoCompletado.ajax.open('GET', url, true);

		autoCompletado.ajax.onreadystatechange = function() {

			if (!autoCompletado.ajax || autoCompletado.ajax == null) { return; }

			if (autoCompletado.ajax.readyState == 4) {

				if (autoCompletado.ajax.status == 200) {

					elDiv.innerHTML = autoCompletado.ajax.responseText;
					lib.elemAdyacente(elTxtBox, 'nxt').innerHTML = '';
					autoCompletado.Desplieaga(posicionInicialLeft, posicionInicialTop, elDiv);
					autoCompletado.ajax.onreadystatechange = function(){};
					autoCompletado.ajax.abort();
					autoCompletado.ajax = null;
				}
			}
		}

		autoCompletado.ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		autoCompletado.ajax.send(null);
		return;
	},





	Desplieaga: function(posLeft, posTop, elDiv) {

		if (autoCompletado.elTxtBoxRaton.value.length >= 3) {

			elDiv.style.left = posLeft + 'px';
			elDiv.style.top = parseInt(posTop + 22) + 'px';
			elDiv.style.display = 'block';

		} else {

			elDiv.innerHTML = '';
			elDiv.style.display = 'none';
		}
		
	},




	Seleccionar: function(contenedoropts) {

		var opt = contenedoropts.getElementsByTagName('li');

		for (var i = 0; i < opt.length; i++) {

			lib.Evento(opt[i], 'mouseover',  function() {
			autoCompletado.Marcar(this);
			})


			lib.Evento(opt[i], 'click', function() {
			autoCompletado.pegarConRaton(this.innerHTML, contenedoropts);
			})   

		}
	},





	Marcar: function(sel) {

		var opt = document.getElementById('contenedorOpt').getElementsByTagName('li');

		for (var i = 0; i < opt.length; i++) {

			if (opt[i].className == 'seleccionado') { 

				opt[i].className = 'noseleccionado';
				sel.className = 'seleccionado';
				break;
			} 
		}
	},







	BajaOpt: function(contenedoropts) {

		var opt = contenedoropts.getElementsByTagName('li');

		for (var i = 0; i <= opt.length-1; i++) {

			if (opt[i].className == 'seleccionado') {

				opt[i].className = 'noseleccionado';

				if (i < opt.length-1) {

					i++;

				} else {

					i = 0;
				}

				opt[i].className = 'seleccionado';
			}
		}
	},




	SubeOpt: function(contenedoropts) {

		var opt = contenedoropts.getElementsByTagName('li');

		for (var i = 0; i <= opt.length-1; i++) {

			if (opt[i].className == 'seleccionado') {

				opt[i].className = 'noseleccionado';

				if (i < opt.length && i > 0) {

					i--;

				} else {

					i = opt.length-1;
				}

				opt[i].className = 'seleccionado';
			}
		}
	},




	pegarConRaton: function(valor, contenedoropts) {

		var elDiv = contenedoropts;
		autoCompletado.elTxtBoxRaton.value = valor.replace(/<[^>]+>/g, '');
		if (elDiv.style.display == 'block') {

			elDiv.style.display = 'none';
			elDiv.innerHTML = '';
		} 

	},





	pegarConEnteryTab: function(ev) {

		var elDiv = document.getElementById('contenedorOpt');
		var opt = elDiv.getElementsByTagName('li');
		var keyCode = (ev) ? ev.keyCode : ev.charCode;


		if ((keyCode == 13) || (keyCode == 9)) {

			for (var i = 0; i <= opt.length-1; i++) {

				if (opt[i].className == 'seleccionado') {

					this.value = opt[i].innerHTML.replace(/<[^>]+>/g, '');

					if (elDiv.style.display == 'block') {

						elDiv.style.display = 'none';
						elDiv.innerHTML = '';
					} 
					break;
				}
			}

			if (keyCode == 13) {

				lib.EventoCancelar(ev);
			}

		}	
	},




	Cerrar: function() {

		setTimeout(autoCompletado.CerrarAhora, 1000);

	},




	CerrarAhora: function() {

		var elDiv = document.getElementById('contenedorOpt');
		if (elDiv.style.display == 'block') {

			elDiv.style.display = 'none';
			elDiv.innerHTML = '';
		}
	}

}

lib.Evento(window, 'load', autoCompletado.init); 
</script> 
</head>
<body>
<form method="post" action=""> 
Nombre: <input type="text" name="txt" id="txt1" class="autocomplete" value="" autocomplete="off" tabindex="1" />
<span class="buscando"></span>
<br /><br />
Nombre: <input type="text" name="txt" id="txt2" class="autocomplete" value="" autocomplete="off" tabindex="2" />
<span class="buscando"></span>
</form>
<div id="contenedorOpt"></div>
</body>
</html>
la parte php en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 25/08/2014 a las 15:40
  #35 (permalink)  
Antiguo 26/10/2013, 14:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Código PHP:
<?php
header
('Content-Type: text/html; charset=UTF-8');
$usuario $_GET["busca"];

if (
strlen($usuario) >= 2) {

    
$mysqli = new mysqli("l""r""pass""bd");

    if (
mysqli_connect_errno()) {
        echo(
"Ha ocurrido un error.");
        exit();
    }


    
$mysqli->set_charset("utf8");


    
$sentencia "SELECT nombre FROM tabla WHERE nombre LIKE '%".$usuario."%' ORDER BY nombre asc";
    
$resultado $mysqli->query($sentencia);

    
$contador 0;

    if (
$resultado->num_rows 0) {

        while (
$row $resultado->fetch_array(MYSQLI_ASSOC)) {

            if(
$contador == 0) {

                echo 
'<ol><li class="seleccionado">' .ResaltarSubStr($row['nombre'], $usuario). '</li>';

            } else {

                echo 
'<li class="noseleccionado">' .ResaltarSubStr($row['nombre'], $usuario). '</li>';
            }

            
$contador += 1;
        }

        echo 
"</ol>";

    } else {

        echo 
'<span>Sin resultados</span>';
    }


$resultado->free();


$mysqli->close();

}


// ========= funciones ===========

function ResaltarSubStr($nombre$usuario) {
$patron "/\b($usuario)+(\w)/i";
$marca preg_replace($patron"<strong>$1</strong>$2"$nombre);
return 
$marca;
}

// ====================
?>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #36 (permalink)  
Antiguo 20/11/2013, 16:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Emular textarea (scrolear verticalmente un div) ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:
<!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=utf-8" />
<title></title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
}



html, body {
	width: 100%;
	height: 100%;

}


.margenes {
	width: 300px;
	height: 30%;
	margin: 0px auto;
	padding: 10px 0 10px 10px;
	border: 1px solid rgb(65, 51, 51);
	background-color: rgb(61, 61, 51);
}


.contenedor {
	height: 100%;
	color: rgb(255, 255, 255);
	background-color: rgb(61, 61, 51);
}



.scrollbar {
	/*position: relative;*/
	float: right;
	width: 11px;
	display: none;
}


.carril {
	position: absolute;
	left: 0;
	top: 0;
	width: 11px;
	background-color: rgb(80, 69, 71);
	border-radius: 1em;
}



.barra {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 9px;
	height: 0;
	background-color: rgb(206, 206, 214);
	border-radius: 1em;
}



.barra:hover {
	cursor: auto;
}


.txtarea {
	width: 289px; /* width de .margenes - width de .carril */
	height: 100%;
	overflow: hidden;
}


.valorTxtarea {
	position: absolute;
	font-size: 17px;
	padding-right: 10px; /* el mismo padding-right que el padding asignado en .margenes */
}
</style>
<script type="text/javascript">
var lib = {

	Evento : function(elemento, nomevento, fnc) {

		if (elemento.addEventListener) {

			elemento.addEventListener(nomevento, fnc, false);

		} else if (elemento.attachEvent) {

			elemento.attachEvent('on' + nomevento, fnc);
		}
	},



	EventoEliminar : function(elemento, nomevento, fnc) {

		if (elemento.removeEventListener) {

			elemento.removeEventListener(nomevento, fnc, false);

		} else if (elemento.detachEvent) {

			elemento.detachEvent('on' + nomevento, fnc);
		}
	},



	cssComputado : function(obj, styleProp) {

		if (window.getComputedStyle) {

			var valor = window.getComputedStyle(obj, null)[styleProp];

		} else if (obj.currentStyle) {

			var valor = obj.currentStyle[styleProp];
		}

		return valor;
	},



	EventoCancelar : function(evt) {

		var evt = evt || window.event;

		if (evt.preventDefault) {

			evt.preventDefault();

		} else {

			evt.returnValue = false;
		}
	},



	EventoParar : function(evt) { 

		var evt = evt || window.event;

		if (evt.stopPropagation) {

			evt.stopPropagation();

		} else {

		evt.cancelBubble = true;
		} 
	},



	posicionAbsolutaElemento : function(elem) {

		var y = 0;

		while (elem.offsetParent) {

			y += elem.offsetTop;
			elem = elem.offsetParent;
		}

		return {top : y};
	},
}




var scrollDiv = {

	init : function() {


		for (var i = 0, obj = document.querySelectorAll('.contenedor'); i < obj.length; i++) {

			scrollDiv.contenedor.push(obj[i]);
			scrollDiv.scroll_bar.push(document.querySelectorAll('.scrollbar')[i]);
			scrollDiv.track.push(document.querySelectorAll('.carril')[i]);
			scrollDiv.bar.push(document.querySelectorAll('.barra')[i]);
			scrollDiv.tArea.push(document.querySelectorAll('.txtarea')[i]);
			scrollDiv.vTxt.push(document.querySelectorAll('.valorTxtarea')[i]);

			scrollDiv.barraScroll(i);

		}
	},


	contenedor: [],
	scroll_bar: [],
	track: [],
	bar: [],
	tArea: [],
	vTxt: [],
	arrastrar: [],
	flechas: [],
	mouseupDocument: [],



	barraScroll : function(indice) {

			if (scrollDiv.vTxt[indice].offsetHeight <= scrollDiv.tArea[indice].offsetHeight) {

				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];
					}
				}


				var cont_Comp = scrollDiv.tArea[indice].offsetHeight;
				var vTxt_Comp = scrollDiv.vTxt[indice].offsetHeight;

				scrollDiv.scroll_bar[indice].style.height = cont_Comp + 'px';

				var trackH = cont_Comp;
				scrollDiv.track[indice].style.height = trackH + 'px';

				var barH = parseInt(cont_Comp * altoBarra(parseInt(vTxt_Comp / cont_Comp)));
				scrollDiv.bar[indice].style.height = barH + 'px';

				var offset1 = {}, offset2 = {};
				var alto_cont = vTxt_Comp - cont_Comp;
				var largoCarril = trackH - barH;
				var vTxtTop = 0;
				var barraTop = 0;
				scrollDiv.scroll_bar[indice].style.display = 'inline';



		// FLECHAS	

				lib.Evento(scrollDiv.tArea[indice], 'click', function(evt) {

					lib.EventoCancelar(evt);
					lib.EventoParar(evt);

					lib.Evento(document.body, 'keydown', scrollDiv.flechas[indice]);
					lib.Evento(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) * (trackH - barH)) / alto_cont)) + 'px';
					scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';
				}

		// FLECHAS


		// RUEDA

				lib.Evento(scrollDiv.contenedor[indice], 'mousewheel', function(event) {ratonScroll(event)});
				lib.Evento(scrollDiv.contenedor[indice], 'DOMMouseScroll', 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) * (trackH - barH)) / alto_cont)) + 'px';
					scrollDiv.vTxt[indice].style.top = vTxtTop + 'px';

					lib.EventoCancelar(evt);
					lib.EventoParar(evt);
				}

		// RUEDA


		// PULSACIÓN en scroll track

				lib.Evento(scrollDiv.track[indice], 'mousedown', function(evt) {

					lib.Evento(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 - 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
Continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 25/08/2014 a las 16:12 Razón: nueva versión
  #37 (permalink)  
Antiguo 24/06/2014, 06:44
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Código:
		// ARRASTRAR scroll bar

				if (('ontouchstart' in scrollDiv.bar[indice])) {

					lib.Evento(scrollDiv.bar[indice], 'touchstart', function(evt) {

						lib.EventoCancelar(evt);
						lib.EventoParar(evt);

						offset1 = {y : (evt.touches[0].pageY) ? evt.touches[0].pageY : evt.touches[0].clientY};

						lib.Evento(document.body, 'touchmove', scrollDiv.arrastrar[indice]);
						lib.Evento(document, 'touchend', scrollDiv.mouseupDocument[indice]);
					});


					scrollDiv.arrastrar[indice] = function(evt) {

						lib.EventoCancelar(evt);
						lib.EventoParar(evt);

						offset2 = {y : (evt.touches[0].pageY) ? evt.touches[0].pageY : evt.touches[0].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)) >= (trackH - barH)) {

								scrollDiv.bar[indice].style.top = (trackH - barH) + 'px';
								var scrll = -parseInt(((trackH - 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;
						}	
					}

				} else {

					lib.Evento(scrollDiv.bar[indice], 'mousedown', function(evt) {

						lib.EventoCancelar(evt);
						lib.EventoParar(evt);

						offset1 = {y : (evt.pageY) ? evt.pageY : window.event.clientY};

						lib.Evento(document.body, 'mousemove', scrollDiv.arrastrar[indice]);
						lib.Evento(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)) >= (trackH - barH)) {

								scrollDiv.bar[indice].style.top = (trackH - barH) + 'px';
								var scrll = -parseInt(((trackH - 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.EventoEliminar(document.body, 'keydown', scrollDiv.flechas[indiceObj]);
		lib.EventoCancelar(evt);
		lib.EventoEliminar(document.body, 'mousemove', scrollDiv.arrastrar[indiceObj]);
		lib.EventoEliminar(document, 'mouseup', scrollDiv.mouseupDocument[indiceObj]);
		lib.EventoEliminar(document.body, 'touchmove', scrollDiv.arrastrar[indiceObj]);
		lib.EventoEliminar(document, 'touchend', scrollDiv.mouseupDocument[indiceObj]);
	}

}


lib.Evento(document, 'DOMContentLoaded', scrollDiv.init);
</script>
</head>
<body>

<div class="margenes">

<div class="contenedor">

	<div class="scrollbar">
		<div class="carril">
			<div class="barra"></div>
		</div>
	</div>


	<div class="txtarea">
		<div class="valorTxtarea">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
			laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</div>
	</div>

</div>

</div>




<br><br>




<div class="margenes">

<div class="contenedor">

	<div class="scrollbar">
		<div class="carril">
			<div class="barra"></div>
		</div>
	</div>


	<div class="txtarea">
		<div class="valorTxtarea">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
			laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</div>
	</div>

</div>

</div>

</body>
</html>
aquí podéis verlo en funcionamiento
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 07/12/2016 a las 13:40
  #38 (permalink)  
Antiguo 25/08/2014, 07:09
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Select con Imágenes ----> compatibilidad : todos los navegadores modernos. no incluido ie8

Si se quiere compatibilidad con ie8, hay que descomentar la segunda función initEmularSelect() y comentar la primera, ya que no acepta el método forEach()

Código:
<!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=utf-8" />
<title></title>
<style type="text/css">

* {
    margin: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}




form {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}




div.placeholder_cont {
    width: 90%;
    height: 3.6em;
    margin: 2em auto;
    background-color: rgb(255, 255, 255);
    font: 1em Verdana;
    border-radius: .5em;
    border: .2em solid rgb(204, 204, 204);
    background-clip: padding-box;
    text-indent: 2%;
}




div.placeholder_cont > span.placeholder_txt {
    height: 100%;
    line-height: 3.6em; /* mismo tamaño que "height" de placeholder_cont*/
    color: rgb(190, 190, 190);
    text-shadow: 0 0 0;
    display: block;
    text-align: left;
}



div.placeholder_cont > span.placeholder_txt > strong {
    color: rgb(0, 0, 0);
}



div.placeholder_cont > img {
    width: 1.48%;
    float: right;
    top: 46%;
    right: 3%;
}




div.placeholder_cont > input {
    display: none;
}



ul.opciones {
    left: -.16em;
    visibility: hidden;
    list-style-type: none;
    width: 99.9%;
    height: auto;
    padding: 0;
    background-color: rgb(255, 255, 255);
    text-align: left;
    border-width: 0 .2em .2em .2em;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    z-index: 100;
}



ul.opciones > li.defecto {
    height: 1.7em;
    padding-top: 1em;
    border-bottom: 0.1em inset rgb(207, 202, 202);
    color: rgb(190, 190, 190);
    text-shadow: 0 0 0;
}



li.scrollerLateral {
    height: 11.7em;
    padding: .3em 0;
    color: rgb(255, 255, 255);
    border-top: 1px inset rgb(204, 204, 204);
}



li.scrollerLateral > div.scrollbarLatera {
    position: absolute;
    top: .3em;
    left: 97.8%;
    width: 1.8%;
    display: inline;
    z-index: 100;
}


li.scrollerLateral > div.scrollbarLatera > div.carrilLatera {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgb(80, 69, 71);
    border-radius: 1em;
    border: .1em solid rgb(158, 158, 158);
}



li.scrollerLateral > div.scrollbarLatera > div.carrilLatera > div.barraLatera {
    position: absolute;
    left: .1em;
    top: 1px;
    width: 82%;
    height: 0;
    background-color: rgb(206, 206, 214);
    border-radius: 1em;
}



li.scrollerLateral > div.scrollbarLatera > div.carrilLatera > div.barraLatera:hover {
    cursor: auto;
}



div.lista {
    width: 100%;
    height: 100%;
    overflow: hidden;
}



div.valorLista {
    position: absolute;
    width: 100%;
    height: auto;
}



div.valorLista > ul {
    height: 100%;
    overflow: hidden;
    list-style-type: none;
    padding: 0;
}




div.valorLista > ul > li {
    padding: .2em 0;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    cursor:pointer;
    text-indent: 2%;
    white-space: nowrap;
}


div.valorLista > ul > li:first-child {
    padding: .9em 0;
}

div.valorLista > ul > li > img {
    width: 6.5%;
    vertical-align: middle;
    margin-right: 2%;
}



div.valorLista > ul > li:hover {
    color: rgb(255, 102, 0);
}


@media screen and (max-width: 1024px) {

    body {
        font-size: 80%;
    }

}


@media screen and (max-width: 860px) {

    body {
        font-size: 62.5%;
    }
}


@media screen and (max-width: 650px) {

    body {
        font-size: 50%;
    }
}
</style>
<script type="text/javascript">
var lib = {

    EventoIE8 : function(elemento, nomevento, fnc) {

        if (elemento.addEventListener) {

                elemento.addEventListener(nomevento, fnc, false);

            } else if (elemento.attachEvent) {

                elemento.attachEvent('on' + nomevento, fnc);
        }
    },


    EventoEliminarIE8 : function(elemento, nomevento, fnc) {

        if (elemento.removeEventListener) {

                elemento.removeEventListener(nomevento, fnc, false);

            } else if (elemento.detachEvent) {

                elemento.detachEvent('on' + nomevento, fnc);
        }
    },


    cssComputado : function(obj, styleProp, psElem) {

        if (obj == null) { return 0; }

        if (window.getComputedStyle) {

            var pseudoElem = psElem || null;
            var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];

        } else if (obj.currentStyle) {

            var valor = (/(em|%)/.test(obj.currentStyle[styleProp])) ? lib.cssComputadoIE8Pixel(obj, styleProp) : obj.currentStyle[styleProp];
        }

        return valor;
    },



    cssComputadoIE8Pixel : function(elem, prop) {

        var value = elem.currentStyle[prop] || 0;
        var Copy = elem.style.left;
        var runtimeCopy = elem.runtimeStyle.left;

        elem.runtimeStyle.left = elem.currentStyle.left;
        elem.style.left = (prop === 'fontSize') ? '1em' : value;
        value = elem.style.pixelLeft + 'px';

        elem.style.left = Copy;
        elem.runtimeStyle.left = runtimeCopy;

        return value;
    },



    EventoCancelar: function(evt) {

    var ev = evt || window.event;

        if (ev.preventDefault) {

            ev.preventDefault();

        } else {

            ev.returnValue = false;
        }
    },



    EventoParar: function(evt) { 

    var ev = evt || window.event;

        if (ev.stopPropagation) {

            ev.stopPropagation();

        } else {

            ev.cancelBubble = true;
        } 
    }

}




var EmularSelect = {

    desplegarOpc: [],
    recogerOpc: null,
    prevObj: null,
    prevOpc: null,



    initEmularSelect: function() {

        Array.prototype.forEach.call(document.querySelectorAll('.placeholder_cont'), function(obj, i) {

            var opciones = obj.querySelector('.opciones');
            var opcionesLista = obj.querySelector('.opcionesLista');

            lib.EventoIE8(obj, 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});

            Array.prototype.forEach.call(opcionesLista.getElementsByTagName('LI'), function(op, n) {

               lib.EventoIE8(op, 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
            });

            scrollDiv.initscrollDiv(i);

        });

/* FUNCIÓN COMENTADA
       for (var i = 0, obj = document.querySelectorAll('.placeholder_cont'); i < obj.length; i++) {

            (function(i) {

                var opciones = obj[i].querySelector('.opciones');
                var opcionesLista = obj[i].querySelector('.opcionesLista');

                lib.EventoIE8(obj[i], 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});
 
                for (var n = 0, op = opcionesLista.getElementsByTagName('LI'); n < op.length; n++) {

                    (function(n) {

                        lib.EventoIE8(op[n], 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
                    })(n);

                }

                scrollDiv.initscrollDiv(i);

            })(i);
        }
*/
    },



    MuestraOpciones: function(evt, obj, opciones, indiceObjeto) {

        lib.EventoCancelar(evt);
        lib.EventoParar(evt);

        lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);
        lib.EventoIE8(document, 'click', EmularSelect.recogerOpc = function() {EmularSelect.Cerrar(opciones);});

        opciones.style.visibility = 'visible';
        opciones.parentNode.getElementsByTagName('IMG')[0].src = 'fh.gif';

        if (EmularSelect.prevObj != null && EmularSelect.prevOpc != opciones) {

            EmularSelect.prevOpc.style.visibility = 'hidden';
            EmularSelect.prevOpc.parentNode.getElementsByTagName('IMG')[0].src = 'fv.gif';
        }

        EmularSelect.prevObj = obj;
        EmularSelect.prevOpc = opciones;
    },




    Pegar: function(evt, _this, opciones, indiceOpcion) {

        lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);

        if (indiceOpcion == 0) {

            opciones.parentNode.getElementsByTagName('INPUT')[0].value = '';
            opciones.parentNode.getElementsByTagName('SPAN')[0].textContent = _this.textContent;

        } else {

            opciones.parentNode.getElementsByTagName('INPUT')[0].value = _this.textContent;
            opciones.parentNode.getElementsByTagName('SPAN')[0].innerHTML =  '<strong>' + _this.textContent + '</strong>';
        }

        EmularSelect.Cerrar(opciones);
    },




    Cerrar: function(opciones) {

        lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);

        opciones.style.visibility = 'hidden';
        opciones.parentNode.getElementsByTagName('IMG')[0].src = 'fv.gif';
    },
}
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 21/09/2014 a las 08:57
  #39 (permalink)  
Antiguo 25/08/2014, 07:12
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #40 (permalink)  
Antiguo 25/08/2014, 07:13
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

continua en el anterior post

Código:
<form method="" action=""> 

    <div class="placeholder_cont">
        <input type="text" name="coches" id="coches" value="" />
        <img src="fv.gif" />
        <span class="placeholder_txt">Modelo Coches</span>
        <ul class="opciones">
            <li class="scrollerLateral">
                <div class="scrollbarLatera">
                    <div class="carrilLatera">
                        <div class="barraLatera"></div>
                    </div>
                </div>
                <div class="lista">
                    <div class="valorLista">
                        <ul class="opcionesLista">
                            <li>Modelo Coches</li>
                            <li><img src="" />Seat Ibiza Turbo Dieel Injección GT World Rally Car</li>
                            <li><img src="" />Audi</li>
                            <li><img src="" />Mercedes</li>
                            <li><img src="" />Fiat</li>
                            <li><img src="" />Citroen</li>
                            <li><img src="" />Alfa Romeo</li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

<br /><br /><br />

    <div class="placeholder_cont">
        <input type="text" name="motos" id="motos" value="" />
        <img src="fv.gif" />
        <span class="placeholder_txt">Modelo Motos</span>
        <ul class="opciones">
            <li class="scrollerLateral">
                <div class="scrollbarLatera">
                    <div class="carrilLatera">
                        <div class="barraLatera"></div>
                    </div>
                </div>
                <div class="lista">
                    <div class="valorLista">
                        <ul class="opcionesLista">
                            <li>Modelo Motos</li>
                            <li><img src="" />Yahama</li>
                            <li><img src="" />Honda</li>
                            <li><img src="" />Ducati</li>
                            <li><img src="" />KTM</li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <input type="submit" value="Enviar">
</form>
</body>
</html>
aquí podéis verlo en funcionamiento
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 29/09/2014 a las 14:26
  #41 (permalink)  
Antiguo 29/09/2014, 14:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Zoom de Imágenes ----> compatibilidad : todos los navegadores modernos. no incluido ie8

Código:
<!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=utf-8" />
<title></title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}


.contenedor {
    width: 52%;
    height: 100%;
    margin: 0 auto;
    padding: 10px 0 80px 10px;
    overflow: hidden;
}


.zoomPad {
    position: relative;
    float: left;
    z-index: 100;
    cursor: crosshair;
}


.zoomPad > img {
    opacity: 1;
    border: 1px solid rgb(102, 102, 102);
}


.zoomPup {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(204, 204, 204);
    z-index: 101;
    visibility: hidden;
}


.zoomPup > img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}



.zoomWindow {
    position: absolute;
    top: 0;
    left: 400px;
    visibility: hidden;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(102, 102, 102);
    z-index: 102;
}


.zoomWrapper {
    width: 300px;
    height: 300px;
}


.zoomWrapperTitle {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.48);
    color: rgb(255, 255, 255);
    text-align: center;
    z-index: 103;
}


.zoomWrapperImage {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.zoomWrapperImage > img {
    position: absolute;
    left: 0;
    top: 0;
}



.zoomPreload {
    position: absolute; 
    top: 50%;
    left: 50%;
    visibility: visible;
    opacity: 0.8;
    color: rgb(51, 51, 51);
    font-size: 12px;
    font-family: Tahoma;
    text-decoration: none;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(255, 255, 255);
    padding: 8px;
    text-align: center;
    background-image: url(http://www.mind-projects.it/projects/jqzoom/images/zoomloader.gif);
    background-repeat: no-repeat;
    background-position: 43px 30px;
    z-index: 110;
    width: 90px;
    height: 43px;
    margin-top: -27px;
    margin-left: -50px;
}



@media screen and (max-width: 1024px) {

    body {
        font-size: 80%;
    }

}


@media screen and (max-width: 860px) {

    body {
        font-size: 62.5%;
    }
}


@media screen and (max-width: 650px) {

    body {
        font-size: 50%;
    }
}
</style>
<script type="text/javascript">
var lib = {

    Evento : function(elemento, nomevento, fnc) {

        elemento.addEventListener(nomevento, fnc, false);

    },


    cssComputado : function(obj, styleProp, psElem) {

        if (obj == null) { return 0; }

        var pseudoElem = psElem || null;
        var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];

        return valor;
    },


    posCursorObj : function(evt, obj) {

        var ev = evt;

        posX = ev.layerX;
        posY = ev.layerY;

        return {x : posX, y : posY};
    }
}





var zoomer = {

zoompad : [], zoompup : [], zoomWindow : [], zoompupImage : [], zoomWrapperContenedor : [], zoomWrapperImage : [], escalaW : [], escalaH : [], zoompupW : [], zoompupH : [], zoompadW : [], zoompadH : [], zoomWrapperImageW : [], zoomWrapperImageH : [], zoompupWCentro : [], zoompupHCentro : [], zoomPreload : [], temporizador : null,


    zoomerInit : function(i) {

        zoomer.temporizador = setTimeout(function() {

            if ((document.querySelectorAll('.zoomPup').length) == i) {clearTimeout(zoomer.temporizador); return false;}

            zoomer.zoompad[i] = document.querySelectorAll('.zoomPad')[i];
            zoomer.zoompup[i] = document.querySelectorAll('.zoomPup')[i];
            zoomer.zoomWindow[i] = document.querySelectorAll('.zoomWindow')[i];

            zoomer.zoompupImage[i] = zoomer.zoompup[i].getElementsByTagName('img')[0];
            zoomer.zoomWrapperContenedor[i] = document.querySelectorAll('.zoomWrapperImage')[i];
            zoomer.zoomWrapperImage[i] = zoomer.zoomWrapperContenedor[i].getElementsByTagName('img')[0];
            zoomer.zoomPreload[i] = document.querySelectorAll('.zoomPreload')[i];

            var n = i, zoomImg = [];
            zoomImg[i] = new Image();
            zoomImg[i].src = zoomer.zoomWrapperImage[i].src;

            zoomImg[i].onload = function() {

                zoomer.zoomPreload[i].style.visibility = 'hidden';

                zoomer.escalaW[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'width'), 10) / parseInt(lib.cssComputado(zoomer.zoompupImage[i], 'width'), 10);
                zoomer.escalaH[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'height'), 10) / parseInt(lib.cssComputado(zoomer.zoompupImage[i], 'height'), 10);

                zoomer.zoompupW[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'width'), 10) / parseInt(lib.cssComputado(zoomer.zoomWrapperContenedor[i], 'width'), 10);
                zoomer.zoompupH[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'height'), 10) / parseInt(lib.cssComputado(zoomer.zoomWrapperContenedor[i], 'height'), 10);

                zoomer.zoompadW[i] = parseInt(lib.cssComputado(zoomer.zoompad[i], 'width'), 10);
                zoomer.zoompadH[i] = parseInt(lib.cssComputado(zoomer.zoompad[i], 'height'), 10);

                zoomer.zoompup[i].style.width = (zoomer.zoompadW[i] / zoomer.zoompupW[i]) + 'px';
                zoomer.zoompup[i].style.height = (zoomer.zoompadH[i] / zoomer.zoompupH[i]) + 'px';

                zoomer.zoompupW[i] = parseInt(lib.cssComputado(zoomer.zoompup[i], 'width'), 10);
                zoomer.zoompupH[i] = parseInt(lib.cssComputado(zoomer.zoompup[i], 'height'), 10);
                
                zoomer.zoomWrapperImageW[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'width'), 10);
                zoomer.zoomWrapperImageH[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'height'), 10);

                zoomer.zoompupWCentro[i] = (zoomer.zoompupW[i] / 2);
                zoomer.zoompupHCentro[i] = (zoomer.zoompupH[i] / 2);

                lib.Evento(zoomer.zoompad[i], 'mouseover', function(event) {zoomer.fooOver(event, zoomer.zoompup[n], n)});
                lib.Evento(zoomer.zoompad[i], 'mousemove', function(event) {zoomer.fooMove(event, zoomer.zoompup[n], n)});
                lib.Evento(zoomer.zoompad[i], 'mouseout', function(event) {zoomer.fooOut(event, zoomer.zoompup[n], n)});

                zoomer.zoomerInit(++i);

            }

        }, 10);
    },  



    fooOver : function(evt, zoompup, indice) {

        var pos1 = lib.posCursorObj(evt);

        var posTopIni = (pos1.y >= (zoomer.zoompadH[indice] - zoomer.zoompupH[indice])) ? (zoomer.zoompadH[indice] - zoomer.zoompupH[indice] - 2) : (pos1.y <= zoomer.zoompupH[indice]) ? 0 : (pos1.y - zoomer.zoompupHCentro[indice]);
        var posLeftIni = (pos1.x >= (zoomer.zoompadW[indice] - zoomer.zoompupW[indice])) ? (zoomer.zoompadW[indice] - zoomer.zoompupW[indice] - 2) : (pos1.x <= zoomer.zoompupW[indice]) ? 0 : (pos1.x - zoomer.zoompupWCentro[indice]);

        zoompup.style.top = posTopIni + 'px';
        zoompup.style.left = posLeftIni + 'px';
        zoomer.zoompupImage[indice].style.top = -posTopIni + 'px';
        zoomer.zoompupImage[indice].style.left = -posLeftIni + 'px';

        zoomer.zoomWindow[indice].style.visibility = 'visible';
        zoomer.zoompad[indice].getElementsByTagName('img')[0].style.opacity = .4;
        zoompup.style.visibility = 'visible';

        zoomer.zoomWrapperImage[indice].complete && (document.querySelectorAll('.zoomPreload')[indice].visibility = 'visible');

    },


    fooMove : function (evt, zoompup, indice) {

        var pos2 = lib.posCursorObj(evt);

        if (pos2.y >= zoomer.zoompupHCentro[indice] && pos2.y <= (zoomer.zoompadH[indice] - zoomer.zoompupHCentro[indice] - 2)) {

            var posTop = pos2.y - zoomer.zoompupHCentro[indice];
            zoompup.style.top = posTop + 'px';
            zoomer.zoompupImage[indice].style.top = -posTop + 'px';

            var posTopVisor = zoomer.escalaH[indice] * posTop;
            zoomer.zoomWrapperImage[indice].style.top = -posTopVisor + 'px';
        }

        if (pos2.x >= zoomer.zoompupWCentro[indice] && pos2.x <= (zoomer.zoompadW[indice] - zoomer.zoompupWCentro[indice] - 2)) {

            var posLeft = pos2.x - zoomer.zoompupWCentro[indice];
            zoompup.style.left = posLeft + 'px';
            zoomer.zoompupImage[indice].style.left = -posLeft + 'px';

            var posLeftVisor = zoomer.escalaW[indice] * posLeft;
            zoomer.zoomWrapperImage[indice].style.left = -posLeftVisor + 'px';
        }
    },


    fooOut : function(evt, zoompup, indice) {

        var pos3 = lib.posCursorObj(evt);

        if (pos3.y < 0 || pos3.x < 0 || pos3.y > (zoomer.zoompadH[indice] - zoomer.zoompupHCentro[indice] - 2) || pos3.x > (zoomer.zoompadW[indice] - zoomer.zoompupWCentro[indice] - 2)) {

            zoompup.style.visibility = '';
            zoomer.zoompad[indice].getElementsByTagName('img')[0].style.opacity = 1;
            zoomer.zoomWindow[indice].style.visibility = '';
        }
    }
}



lib.Evento(document, 'DOMContentLoaded', function() {zoomer.zoomerInit(0);});
</script>
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #42 (permalink)  
Antiguo 29/09/2014, 14:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

continua en el post anterior

Código:
</head>
<body>

<div class="contenedor">

    <div class="zoomPad">
        <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-corredera-t.jpg" alt="" />
        <div class="zoomPup">
            <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-corredera-t.jpg" />
        </div>
        <div class="zoomWindow">
            <div class="zoomWrapper">
                <div class="zoomWrapperTitle">La Corredera</div>
                <div class="zoomWrapperImage">
                    <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-corredera-g.jpg?0.234323" />
                </div>
            </div>
        </div>
        <div class="zoomPreload">Cargando zoom</div>
    </div>

<div id="division" style="height: 40px; clear:both"></div>

    <div class="zoomPad">
        <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-fontanilla2-t.jpg" alt="" />
        <div class="zoomPup">
            <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-fontanilla2-t.jpg" />
        </div>
        <div class="zoomWindow">
            <div class="zoomWrapper">
                <div class="zoomWrapperTitle">La Fontanilla</div>
                <div class="zoomWrapperImage">
                    <img src="http://www.manuelgallardopozo.com/cuadros/fregenal-fontanilla2-g.jpg?0.342345" />
                </div>
            </div>
        </div>
        <div class="zoomPreload">Cargando zoom</div>
    </div>

</div>

</body>
</html>
aquí podéis verlo en funcionamiento
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #43 (permalink)  
Antiguo 02/12/2014, 05:12
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Emulando Input Type Range --> compatibilidad: todos los navegadores modernos. no incluido ie8

Código:
<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">

* {
    margin: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}



div.contenedorRango {
    width: 40%; /* el ancho del range con respecto a su elemento padre */
    margin: 2.75em auto;
    padding: 0 2em;
    background-color: rgb(224, 224, 224);
    border: .1em solid rgb(221, 20, 20);
}



div.contenedorRango > div.valorRango {
    width: 0;
    height: 1.55em;
    left: 0;
}



div.contenedorRango > div.valorRango > span.minimo {
    float: left;
    left: 0;
    font: bold .9em Verdana;
    color: rgb(68, 68, 62);
}



div.contenedorRango > div.valorRango > span.maximo {
    float: right;
    right: 0;
    font: bold .9em Verdana;
    color: rgb(68, 68, 62);
}



div.contenedorRango > div.rango {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}



div.contenedorRango > div.rango > div.bocadillo {
    width: 2.7em;
    height: auto;
    left: 1.5em; /*19px;*/
    top: 0; 
    margin-bottom: .5em;
    background-color: rgb(191, 191, 199);
    font: bold 80% Verdana;
    color: rgb(68, 68, 62);
    border-radius: .2em;
    border: 0.1em solid rgb(158, 158, 158);
    text-align: center;
    z-index: 2;
}



div.contenedorRango > div.rango > div.bocadillo:after {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -9px;
    left: 50%;
    display: block;
    content: "";
    margin-left: -3px;
    overflow: hidden;
    border: 4px solid rgba(0, 0, 0, 0);
    border-top-color: rgb(158, 158, 158);
}



div.contenedorRango > div.rango > div.scrollbar {
    width: 100%;
    height: .75em;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril {
    width: 100%;
    height: .6em;
    top: 10%;
    background-color: rgb(80, 69, 71);
    border-radius: 1em;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > input.inputTextValue {
    display: none;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra {
    width: 2.45em;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(191, 191, 199);
    border-radius: 3em;
    z-index: 2;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra:hover {
    cursor: move;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.progreso {
    width: 0;
    height: 100%; 
    background-color: rgb(47, 184, 28);
    border-radius: 1em;
}



div.contenedorRango > div.rango > ul.regla {
    width: 0;
    list-style-type: none;
    top: -19px;
    padding-left: 0;
    overflow: hidden;
    color: rgb(224, 224, 224);
}


div.contenedorRango > div.rango > ul.regla > li.num {
    width: 0;
    height: .25em;
    float: left;
    left: 0;
    top: 0;
    text-align: right;
    border-left: 1px solid rgb(15, 15, 15);
    border-right: 1px solid rgb(15, 15, 15);
}
</style>
<script type="text/javascript">
lib = {

    Evento : function(elemento, nomevento, fnc) {

        elemento.addEventListener(nomevento, fnc, false);
    },



    EventoEliminar : function(elemento, nomevento, fnc) {

        elemento.removeEventListener(nomevento, fnc, false);
    },



    cssComputado : function(obj, styleProp) {

        if (obj == null) { return 0; }

        var valor = window.getComputedStyle(obj, null)[styleProp];

        return valor;
    },



    EventoCancelar : function(evt) {

        evt.preventDefault();
    },



    EventoParar : function(evt) { 

        evt.stopPropagation();
    }

}



var Range = {

    reglaVisible : true, // boleano --> true / false
    min : [],
    max : [],
    step : [],
    inicia : [],
    barW : 0,
    trackW : 0,
    posInicialBocadillo : 0,
    nuevoMin : [],
    valorBocata : [],
    valorProgreso : 0,
    desplazamiento : 0,
    desplazamientoBoca : 0,
    barraLeft : 0,
    barraProgreso : null,
    bocata : null,
    dividirCarril : [],
    anchoCarril : [],
    offset1 : {}, 
    offset2 : {},
    ofset : 0,
    fooDrag : function() {},


    initRange : function() {

        Range.barW = parseInt(lib.cssComputado(document.querySelector('.barra'), 'width'));
        Range.trackW = parseInt(lib.cssComputado(document.querySelector('.carril'), 'width')),
        Range.posInicialBocadillo = parseInt(lib.cssComputado(document.querySelector('.bocadillo'), 'left'));

        Array.prototype.forEach.call(document.querySelectorAll('.contenedorRango'), function(rango, i) {

            Range.min.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-min'), 10));
            Range.max.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-max'), 10));
            Range.step.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-step'), 10));
            Range.inicia.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-inicia'), 10));

            Range.nuevoMin.push((Range.min[i] == 0) ? 1 : Range.min[i]);
            var dividirCar = parseInt((Range.trackW - Range.barW) / (Range.max[i] - Range.nuevoMin[i]), 10);
            var anchoCar = (dividirCar * (Range.max[i] - Range.nuevoMin[i]));

            Range.dividirCarril.push(parseInt(anchoCar / (Range.max[i] - Range.nuevoMin[i]), 10));

            Range.valorBocata.push(Range.inicia[i]-1);
            Range.anchoCarril.push(anchoCar);
            rango.querySelector('.minimo').textContent = Range.min[i];
            rango.querySelector('.maximo').textContent = Range.max[i];


            if (Range.reglaVisible) { 

                var ULregla = document.createElement('UL');
                ULregla.setAttribute('class', 'regla');
                rango.querySelector('.rango').appendChild(ULregla);

                for (var x = Range.step[i], regla = (Range.max[i] - Range.nuevoMin[i]), n = 0; x <= regla; x+=Range.step[i]) {

                    LIregla = document.createElement('LI');
                    LIregla.setAttribute('class', 'num');
                    ULregla.appendChild(LIregla);
                    rango.querySelectorAll('.num')[n++].style.width = ((Range.dividirCarril[i] * Range.step[i]) - 2) + 'px';
                }

                rango.querySelector('.regla').style.width = Range.anchoCarril[i] + 'px';
                rango.querySelector('.regla').style.paddingLeft = Range.barW + 'px';
            }


            rango.querySelector('.carril').style.width = (Range.anchoCarril[i] + Range.barW) + 'px';
            rango.querySelector('.valorRango').style.width = (Range.anchoCarril[i] + 10) + 'px';
            rango.querySelector('.valorRango').style.left = (Range.barW - 10) + 'px';
            rango.querySelector('.barra').style.left = (Range.inicia[i] <= 1) ? Range.inicia[i] + 'px' : (Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + 'px';
            rango.querySelector('.bocadillo').style.left = (Range.inicia[i] <= 1) ? (Range.inicia[i] + Range.posInicialBocadillo) + 'px' : ((Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + Range.posInicialBocadillo) + 'px';
            rango.querySelector('.bocadillo').textContent = (Range.inicia[i] <= 1) ? Range.nuevoMin[i] : (((Range.inicia[i] * Range.step[i]) + Range.nuevoMin[i]) - Range.step[i]);
            rango.querySelector('.progreso').style.width = (Range.inicia[i] <= 1) ? Range.inicia[i] + 'px' : ((Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + (Range.posInicialBocadillo / 2)) + 'px';
            
            Range.valorBocata[i] = rango.querySelector('.bocadillo').textContent;

            rango.querySelector('.inputTextValue').value = Range.valorBocata[i];

            lib.Evento(rango.querySelector('.barra'), 'mousedown', function(event) {Range.scrollRango(event, this, rango, i)});

        });

    },
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #44 (permalink)  
Antiguo 02/12/2014, 05:13
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
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>
aquí podéis verlo en funcionamiento
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #45 (permalink)  
Antiguo 18/08/2015, 07:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Subir Imágenes al servidor --> compatibilidad: todos los navegadores modernos. no incluido ie8

subirArchivosFileReader.html

Código:
<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<style>
* {
    margin: 0;
    padding: 0;
    position: relative;
}


#tmp_imgs {
    list-style: none;
    width: 30%;
    margin: 0 auto;
    padding: 10px 0;
    border: 1px solid rgb(177, 184, 177);
    display: none;
}



#tmp_imgs > li {
    width: 100%;
}


img.thumbnail {
    width: 20%;
    display: inline-block;
    opacity: .4;
    background-color: rgb(255, 255, 255);
    vertical-align: middle;
}


div.barra {
    width: 70%;
    height: 20px;
    display: inline-block;
    margin-left: 5%;
    border: 1px solid rgb(172, 166, 166);
    border-radius: 6px;
    background-color: rgb(201, 49, 104);

}


div.barraProgreso {
    width: 0;
    height: 100%;
    background-color: rgb(118, 196, 47);
    border-radius: 6px;
}


span.porcentaje {
    position: absolute;
    top: 0;
    left: 46%;
    font: bold .8em Verdana;
    color: rgb(255, 255, 255);
}


span.errores {
    float: right;
    right: 5px;
    top: 0;
    position: absolute;
    font: .7em Tahoma;
    color: rgb(201, 49, 104);
}
</style>
<script type="text/javascript">
var uploadFileAjax = new (function() {

    var archivosAsubir = [];
    var cuantos = 0;
    var esteArchivo = [];


    function initSubirImg(evt, frm) {

        if (archivosAsubir.length == 0) return false;

        if (!window.FormData) {

            return true;

        } else {

            evt.preventDefault();

            var errores = {
                'ko1' : 'El tipo de archivo no está permitido. Se admiten (' + frm.archivos.getAttribute('accept') + ')',
                'ko2' : 'El tamaño del archivo supera el máximo permitido'
            }
            var uri = frm.action;
            var ajax = new XMLHttpRequest();
            var fData = new FormData();
            ajax.open('POST', uri, true);
            var i;

            ajax.onreadystatechange = function(){

                if (ajax.readyState == 4 && ajax.status == 200) {

                    var respuesta = JSON.parse(ajax.responseText);

                    var ktal = respuesta.ktal;

                    for (var n = 0; n < ktal.length; n++) {
                      
                      if (ktal[n] == 'ok') {

                        document.querySelectorAll('.barraProgreso')[n].style.width = '100%';
                        document.querySelectorAll('.porcentaje')[n].textContent = '100%';
                        document.querySelectorAll('.thumbnail')[n].style.opacity = 1;

                      } else {

                        document.querySelectorAll('.barraProgreso')[n].style.width = '0%';
                        document.querySelectorAll('.porcentaje')[n].textContent = '0%';
                        document.querySelectorAll('.errores')[n].textContent = errores[ktal[n]];
                      }
                      
                    }
                }
            }


            for (i = cuantos; i < archivosAsubir.length; i++) {

                fData.append('archivo_'+i, archivosAsubir[i]);

                (function(i) {

                    ajax.upload.addEventListener('progress', function(event) {progreso(event, i)}, false);

                })(i);
            }

            cuantos = i;
            ajax.send(fData);
        }
    }



    function progreso(evt, indice) {

        var porcentaje = Math.round((evt.loaded / evt.total) * 100) - 1;

        document.querySelectorAll('.barraProgreso')[indice].style.width = porcentaje + '%';
        document.querySelectorAll('.porcentaje')[indice].textContent = porcentaje + '%';
    }


    function mostrarImg() {

        var inputFile = document.getElementById('archivos');

        inputFile.addEventListener('change', function() {

                archivosAsubir.push('IE');
                return false;
            }

            if (this.files.length == 0) return false;

            var fragListado = document.createDocumentFragment();

            Array.prototype.forEach.call(this.files, function(archivo, i) {

                esteArchivo[i] = archivo;

                if (inputFile.getAttribute('accept').indexOf(esteArchivo[i]['type']) == -1) {alert('El tipo de archivo(s) no está permitido'); inputFile.value = ''; return false;}

                if (esteArchivo[i]['size'] > 170000) {alert('El tamaño del archivo(s) supera el máximo permitido'); inputFile.value = ''; return false;}

                var lector = new FileReader();

                lector.addEventListener('load', function(event) {

                    var li = document.createElement('li');
                    li.setAttribute('class', 'lista');

                    var contenido = fragListado.appendChild(li);

                    var img = document.createElement('img');
                    img.setAttribute('src', event.target.result);
                    img.setAttribute('class', 'thumbnail');

                    contenido.appendChild(img);

                    var barra = document.createElement('div');
                    barra.setAttribute('class', 'barra');

                    var contenidoBarra = contenido.appendChild(barra);

                    var barraProgreso = document.createElement('div');
                    barraProgreso.setAttribute('class', 'barraProgreso')

                    var porcentaje = document.createElement('span');
                    porcentaje.setAttribute('class', 'porcentaje');
                    porcentaje.textContent = '0%';

                    contenidoBarra.appendChild(barraProgreso);
                    contenidoBarra.appendChild(porcentaje);

                    var error = document.createElement('span');
                    error.setAttribute('class', 'errores');

                    contenido.appendChild(error);

                    img.addEventListener('load', function() {

                        archivosAsubir.push(esteArchivo[i]);

                        document.getElementById('tmp_imgs').style.display = 'block';
                        document.getElementById('tmp_imgs').appendChild(fragListado);

                    }, false);

                }, false);

                lector.readAsDataURL(esteArchivo[i]);

            });

        }, false);
    }

    window.addEventListener('load', mostrarImg, false);

    this.initSendImg = initSubirImg;

})();
</script>
</head>
<body>

    <form action="subirArchivos.php" method="post" name="f" id="f" enctype="multipart/form-data" onSubmit="return uploadFileAjax.initSendImg(event, this)">
        <input type="hidden" name="MAX_FILE_SIZE" value="170000" />
        <input type="file" id="archivos" name="archivos" size="10" multiple="multiple" accept="image/jpg, image/jpeg, image/png, image/gif" /> 
        <input type="submit" id="i_submit" value="Subir" />
    </form>

    <ul id="tmp_imgs"></ul>

</body>
</html>

subirArchivos.php
Código:
<?php
include_once 'subirArchivosResize.php';
$eImg = new editarImg();

if (empty($_FILES['archivos'])) {

    foreach ($_FILES as $archivo) {

        $eImg->tomaInfo($archivo, array('tipo' => 'relativa', 'valor' => array(30)));
    }

    header('Content-Type: ' .$eImg->obtenerTipo());

    $r = array('ktal' => $eImg->_resp);

    echo json_encode($r);

} else {

    $eImg->tomaInfo($_FILES['archivos'], array('tipo' => 'relativa', 'valor' => array(30)));

    $r = json_encode(array('ktal' => $eImg->_resp));

?>

    <!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="application/xhtml; charset=utf-8" />
    <title></title>
    <style type="text/css">
    * {
    margin: 0; 
    padding: 0;
    border: none;
    position: relative;
    }

    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        font-size: 100%;
    }

    div#infoSubida {
        width: auto;
        height: auto;
        position: absolute;
        top: 30%;
        left: 50%;
        margin-left: -25%;
        padding: 10px;
        border: 1px solid rgb(136, 136, 136);
        text-align: center;
    }

    span#errores {
        display: block;
        color: rgb(223, 61, 61);
    }

    span#aciertos {
        display: block;
        color: rgb(63, 66, 66);
    }

    img#f {
        width: auto;
    }
    
    a.redir {
        display: block;
        color: rgb(55, 182, 121);
        text-decoration: none;
    }
    </style>
    <script type="text/javascript">
        var errores = {
            'ko1' : 'El tipo de archivo no está permitido. Se admiten (<?php echo implode(", ", $eImg->_tiposPermitidos)?>)',
            'ko2' : 'El tamaño del archivo supera el máximo permitido'
        },

        kt = JSON.parse(<?php echo json_encode($r);?>);
        

    (function() {

        function muestraResp() {

            if (kt.ktal[0] != 'ok') {

                document.querySelector('#errores').innerHTML = errores[kt.ktal[0]];
                document.querySelectorAll('.redir')[0].innerHTML = 'Intentarlo otra vez --> FILEREADER';
                document.querySelectorAll('.redir')[1].innerHTML = 'Intentarlo otra vez --> WEBKITURL';

            } else {
continua en el siguiente
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 24/09/2015 a las 06:16
  #46 (permalink)  
Antiguo 12/09/2015, 07:35
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Código:
document.querySelector('#aciertos').innerHTML = 'El archivo se ha subido con éxito';
				document.querySelector('#f').src = '<?php echo $eImg->_guardarEn?>';
				document.querySelectorAll('.redir')[0].innerHTML = 'Subir otro archivo --> FILEREADER';
				document.querySelectorAll('.redir')[1].innerHTML = 'Subir otro archivo --> WEBKITURL';
			}
		}

		window.attachEvent('onload', muestraResp);

	})();
	</script>
	</head>
	<body>

		<div id="infoSubida">

			<span id="errores"></span>
			<span id="aciertos"></span>

			<img id="f" src="./SubirArchivos/imgdefecto.gif" />

			<a class="redir" href="subirArchivosFileReader.html"></a>

		</div>

	</body>
	</html>
<?php
}
?>
continua en el siguiente
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 15/09/2015 a las 06:53
  #47 (permalink)  
Antiguo 12/09/2015, 07:37
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

subirArchivosResize.php

Código:
<?php

class editarImg {

	private $_imagen;
	private $_ancho;
	private $_alto;
	public $_tiposPermitidos = array(
		IMAGETYPE_JPEG => 'image/jpeg; charset=binary',
		IMAGETYPE_GIF => 'image/gif; charset=binary',
		IMAGETYPE_PNG => 'image/png; charset=binary'
	);
	public $_tipo;
	//private $_mime;
	public $_nombre;
	private $_tmp_nombre;
	private $_tamanoImg;
	private $_tamanoMax = 170000;
	private $_dir = 'SubirArchivos/';
	public $_guardarEn;
	private $_archivo;
	public $_resp = array();
	private $_escalaTipo;
	private $_escalaValor;
	private $_escala = 100;
	private $_error = 0;



	public function tomaInfo($fileName, $escala) {

		list($ancho, $alto, $tipoNOusado, $str) = getimagesize($fileName['tmp_name']);

		$this->_ancho = $ancho;
		$this->_alto = $alto;
		$this->_archivo = $fileName;
		$this->_tmp_nombre = $this->_archivo['tmp_name'];
		$finfo = new finfo();
		$this->_tipo = $finfo->file($this->_tmp_nombre, FILEINFO_MIME);
/*
$finfo = finfo_open();
$this->_tipo = finfo_file($finfo, $fileName['tmp_name'], FILEINFO_MIME);
finfo_close($finfo);
*/
		$this->_nombre = $this->_archivo['name'];
		$this->_tamanoImg = $this->_archivo['size'];
		$this->_error = $this->_archivo['error'];
		$this->_escalaTipo = $escala['tipo'];
		$this->_escalaValor = $escala['valor'];

		if ($this->_tipo == $this->_tiposPermitidos[IMAGETYPE_JPEG]) {

			$this->_imagen = imagecreatefromjpeg($this->_tmp_nombre);

		} elseif ($this->_tipo == $this->_tiposPermitidos[IMAGETYPE_GIF]) {

			$this->_imagen = imagecreatefromgif($this->_tmp_nombre);

		} elseif ($this->_tipo == $this->_tiposPermitidos[IMAGETYPE_PNG]) {

			$this->_imagen = imagecreatefrompng($this->_tmp_nombre);

		}

		$this->guardar();
	}




	private function guardar() {

		if (!empty($this->_archivo) && $this->_error == UPLOAD_ERR_OK) {

			if (($respuesta = $this->validarExtension()) === true) {

				if (($respuesta = $this->validarTamano()) === true) {

					$nombreGenerado = $this->aleatorio();
					$this->_guardarEn = $this->_dir . '' . $nombreGenerado . '' .$this->_nombre;
					
					move_uploaded_file($this->_tmp_nombre, $this->_guardarEn);

					$this->_escala = implode(", ", $this->_escalaValor);

					if ($this->_escalaTipo == 'relativa') {

						$this->escalaRelativa($this->_escala);

					} elseif ($this->_escalaTipo == 'absoluta') {

						$this->escalaAbsoluta($this->_escala);
					}

					array_push($this->_resp, 'ok');

				} else {

					array_push($this->_resp, $respuesta);
				}

			} else {

				array_push($this->_resp, $respuesta);
			}
		}

	}



	private function aleatorio() {

		return md5(mt_rand() * time()); // rand()
	}
	


	public function obtenerTipo() {

		return in_array($this->_tipo, $this->_tiposPermitidos) ? $this->_tipo : null;
	}


	private function validarExtension() {

		//return in_array($this->_tipo, $this->_tiposPermitidos) ? true : 'El tipo de archivo no está permitido. Se admiten ( ' . implode(', ', $this->_tiposPermitidos) . ' )';
		return in_array($this->_tipo, $this->_tiposPermitidos) ? true : 'ko1';
	}



	private function validarTamano() {

		//return ($this->_tamanoImg <= $this->_tamanoMax) ? true : 'El tamaño del archivo supera el máximo permitido';
		return ($this->_tamanoImg <= $this->_tamanoMax) ? true : 'ko2';
	}


	private function escalaRelativa($escala) {

		$ancho = $this->_ancho * $escala / 100;
		$alto = $this->_alto * $escala / 100;
		$this->redimensionar($ancho, $alto);
	}
 

	private function escalaAbsoluta($escala) {

		$valores = explode(",", $escala);
		$ancho = $valores[0];
		$alto = $valores[1];
		$this->redimensionar($ancho, $alto);
	}


	private function redimensionar($ancho, $alto) {
		
		$nuevaImagen = imagecreatetruecolor($ancho, $alto);

		imagecopyresampled($nuevaImagen, $this->_imagen, 0, 0, 0, 0, $ancho, $alto, $this->_ancho, $this->_alto);
		imagejpeg($nuevaImagen, $this->_guardarEn, 100);
		imagedestroy($nuevaImagen);
	}

};

?>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #48 (permalink)  
Antiguo 05/08/2016, 07:03
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 11 años, 5 meses
Puntos: 1011
Respuesta: [APORTE] efectos sin jquery

Tags Input

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="es-es">
  3. <meta charset="utf-8">
  4. <meta name="language" content="es">
  5. <meta name="distribution" content="global">
  6. <meta name="rating" content="General">
  7. <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
  8. *, *:before, *:after {
  9.     margin: 0;
  10.     padding: 0;
  11.     border: 0;
  12.     position: relative;
  13.     -webkit-tap-highlight-color: rgba(0,0,0,0);
  14.     -webkit-box-sizing: border-box;
  15.     -moz-box-sizing: border-box;
  16.     box-sizing: border-box;
  17. }
  18.  
  19.  
  20.  
  21. html {
  22.     width: 100%;
  23.     height: 100%;
  24.     -ms-touch-action: none;
  25. }
  26.  
  27.  
  28. body {
  29.     font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  30.     -webkit-touch-callout: none;
  31.     -webkit-text-size-adjust: none;
  32.     -webkit-user-select: none;  
  33. }
  34.  
  35.  
  36. ul.cont-input {
  37.     width: 25rem;
  38.     overflow: auto;
  39.     list-style-type: none;
  40.     border: 1px solid rgb(193, 184, 184);
  41.     margin: 0 auto;
  42. }
  43.  
  44.  
  45. ul.cont-input > li {
  46.     float: left;
  47.     padding: .2rem .2rem .2rem 0;
  48. }
  49.  
  50.  
  51. ul.cont-input > li > span {
  52.     background-color: rgb(180, 212, 234);
  53.     border: 1px solid rgb(15, 216, 186);
  54.     border-radius: 3px;
  55.     display: inline-block;
  56.     padding: .1rem .9rem .1rem .1rem;
  57.     margin: 0 .1rem;
  58. }
  59.  
  60.  
  61. ul.cont-input > li > span > i {
  62.     font-size: .9rem;
  63.     position: absolute;
  64.     top: 0;
  65.     right: 3px;
  66.     display: inline;
  67.     font-family: arial, sans-serif;
  68.     line-height: .9rem;
  69.     color: rgb(255, 0, 0);
  70.     cursor: pointer;
  71. }
  72.  
  73.  
  74. input.inputTags {
  75.     min-width: 3rem;
  76.     -moz-box-sizing: border-box;
  77.     -webkit-box-sizing: border-box;
  78.     box-sizing: border-box;
  79.     -moz-box-shadow: none;
  80.     -webkit-box-shadow: none;
  81.     box-shadow: none;
  82.     background-color: inherit;
  83.     outline: none;
  84. }
  85. var inputTagging = {
  86.  
  87.     params : [],
  88.     exp : new RegExp('\\s'), //carácter con el que se creará un nuevo tag
  89.  
  90.     escritura: function() {
  91.  
  92.         Array.prototype.forEach.call(document.querySelectorAll('.inputTags'), function(obj, i) {
  93.  
  94.             inputTagging.params.push(new Array());
  95.  
  96.             obj.addEventListener('keyup', function() {
  97.  
  98.                 if (inputTagging.exp.test(this.value)) inputTagging.nuevoTag(this.value, this, i);
  99.  
  100.             }, false);
  101.  
  102.  
  103.             document.querySelectorAll('.cont-input')[i].addEventListener('click', function() {
  104.  
  105.                 obj.focus();
  106.  
  107.             }, false);
  108.         })
  109.  
  110.     },
  111.  
  112.  
  113.     nuevoTag: function(valTag, control, indice) {
  114.  
  115.         var tagLimpio = valTag.replace(this.exp, ''),  
  116.         lis = document.createElement('li'),
  117.         sp = document.createElement('span'),
  118.         cierre = document.createElement('i'),
  119.         LIcontrol = document.querySelectorAll('.r-input')[indice],
  120.         controlpadre = LIcontrol.parentNode;
  121.  
  122.         sp.textContent = tagLimpio;
  123.         cierre.textContent = 'x';
  124.  
  125.         cierre.addEventListener('click', function() {
  126.             var li = this.parentNode.parentNode,
  127.                 ul = li.parentNode,
  128.                 listaNodos = Array.prototype.slice.call(ul.children),
  129.                 indexLi = listaNodos.indexOf(li);
  130.             ul.removeChild(li);
  131.             control.focus();
  132.             inputTagging.params[indice].splice(indexLi, 1);
  133.             control.nextSibling.value = inputTagging.params[indice];
  134.         }, false);
  135.  
  136.         sp.appendChild(cierre);
  137.         lis.appendChild(sp);
  138.  
  139.         controlpadre.insertBefore(lis, LIcontrol);
  140.         control.value = '';
  141.         control.focus();
  142.  
  143.         this.params[indice].push(tagLimpio);
  144.         control.nextSibling.value = this.params[indice];
  145.     }
  146. }
  147.  
  148.  
  149. document.addEventListener('DOMContentLoaded', function() {
  150.  
  151.     inputTagging.escritura();
  152.  
  153. }, false);
  154. </head>
  155.  
  156.     <ul class="cont-input">
  157.         <li class="r-input">
  158.             <input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
  159.         </li>
  160.     </ul>
  161.  
  162. <br><br>
  163.  
  164.     <ul class="cont-input">
  165.         <li class="r-input">
  166.             <input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
  167.         </li>
  168.     </ul>
  169.  
  170. </body>
  171. </html>

Observaciones.-
  • Para cambiar el carácter con el que se crearán los tag, editar esta línea - exp : new RegExp('\\s') -con el carácter deseado. Por defecto es la barra espaciadora
  • El campo que se ha de recoger en el envío, es el campo hidden --> elinput[]

En caso de querer de reemplazar tanto por tags como por imágenes, añade este función
Código HTML:
Ver original
  1. imagenes: function(val) {
  2.  
  3.         return {
  4.  
  5.             'concepto1' : 'urlimg.jpg',
  6.             'concepto2' : 'urlimg.jpg',
  7.             'concepto3' : 'urlimg.jpg'
  8.  
  9.         } [val] || null;
  10.  
  11.     },
y reemplaza la línea 127
Código HTML:
Ver original
  1. sp.textContent = tagLimpio;
por
Código HTML:
Ver original
  1. var img = this.imagenes(tagLimpio);
  2.  
  3.         if (typeof img == 'object') {
  4.  
  5.             sp.textContent = tagLimpio;
  6.  
  7.         } else {
  8.  
  9.             sp.innerHTML = '<image src="' + img + '">';
  10.         }

DEMO
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 10/08/2016 a las 15:33

Etiquetas: efectos, funcion, html, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 11 personas




La zona horaria es GMT -6. Ahora son las 02:37.