Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Explicacion de cualquier pedazo de codigo

Estas en el tema de Explicacion de cualquier pedazo de codigo en el foro de Jquery en Foros del Web. la parte que gusten explicarme, me ayudaria mucho soy nuevo en jquery y no lo comprendo completamente por algunos metodos , asi que le pedazo ...
  #1 (permalink)  
Antiguo 06/11/2013, 00:02
Avatar de CMushroom  
Fecha de Ingreso: diciembre-2011
Ubicación: Morelos
Mensajes: 99
Antigüedad: 12 años, 10 meses
Puntos: 1
Pregunta Explicacion de cualquier pedazo de codigo

la parte que gusten explicarme, me ayudaria mucho soy nuevo en jquery y no lo comprendo completamente por algunos metodos , asi que le pedazo que me gusten explicar .
Código HTML:
$(function() 
	{
	var $Actual = 0;
	
	var $VelocidadDesvanecido = 400;
	var $VelocidadAnimacion = 600;
	var $TipoEase = 'easeOutCirc';
	
	var $TiraImagenes = $('#miniatura_de_desplazamiento');// obtenemos el id div contiene los divs con las imagenes de la tirascroll
	var $ScrollContenedor = $TiraImagenes.find('.contenedor');//find busca en los descendientes de el objeto .contenedor.
	var $ScrollContenido = $TiraImagenes.find('.contenido');//find busca en los descendientes de el objeto .contenido.
	
	var $TituloImagen = $('#pagina_titulo');
	var $VistaPrevia = $('#pagina_vistaprevia');
	var $DescripcionImagen = $('#pagina_descripcion');
   
    var $SuperPosicion = $('#overlay');
	
	var LongitudScrollContenido = $ScrollContenido.length; 
	var AlturaVentana = $(window).height();//Altura de la ventana
	var totalcontenido	= 0;
	var AlturaImagen	= 0;
	var contenedor_desplazable = 0;
				
	$TiraImagenes.find('img').each(function()//Almacena las imagenes de el scroll y las carga y construlle la tira desplazable
		{
		var $Imagen = $(this);
		$('<img/>').load(function()
			{
			++ contenedor_desplazable;
			if(contenedor_desplazable == LongitudScrollContenido)
				{
				AlturaImagen = $TiraImagenes.find('.contenido:first').height();
				ConstruirTiraDesplazable();
				$TiraImagenes.stop().animate({'left':'0px'},$VelocidadAnimacion);
				}
			}).attr('src',$Imagen.attr('src'));
		});
				
	$ScrollContenido.bind('click',function(e)// gestiona los eventos
		{
		var $this = $(this);	
		var $Identificador = $this.index();
		if($Actual == $Identificador)
			{
			return;
			}
		var $ImagenGrande = $('#foto_grande');
		if($ImagenGrande.length > 0)
			{
			$ImagenGrande.animate({'left':'350px','opacity':'0'},$VelocidadAnimacion,function()
				{
				$ImagenGrande.remove();
				});
			}
					
		var $TituloActual 	       = $TituloImagen.find('h1:nth-child('+($Actual+1)+')');
		var $SiguienteTitulo       = $TituloImagen.find('h1:nth-child('+($Identificador+1)+')');
		var $ImagenActual          = $VistaPrevia.find('img.pagina_miniatura:eq('+$Actual+')');
		var $SiguienteImagen	   = $VistaPrevia.find('img.pagina_miniatura:eq('+$Identificador+')');
		var $DescripcionActual     = $DescripcionImagen.find('div:nth-child('+($Actual+1)+')');
		var $SiguienteDescripcion  = $DescripcionImagen.find('div:nth-child('+($Identificador+1)+')');
					
		$Actual = $Identificador;
		
		$TituloActual.stop().animate({'top' : '-50px'},$VelocidadAnimacion,function()//para de ejecutar animacion titulo actual top -50
			{
			$(this).hide();
			$SiguienteTitulo.show().stop().animate({'top' : '0px'},$VelocidadAnimacion);//para de ejecutar animacion titulo actual top 0
			});
					
		$SiguienteImagen.show();
		
		$ImagenActual.stop().animate({'left' : '310px','opacity' : '0'},$VelocidadAnimacion,function()
			{
			$(this).hide().css({'left' : '310px','opacity' : 1,'z-index' : 1});
			$SiguienteImagen.css({'z-index' : 9999});
			});
			
		$DescripcionActual.stop().animate({'left' : '205px','opacity' : '0'},$VelocidadAnimacion,function()
			{
			$(this).hide();
			$SiguienteDescripcion.show().stop().animate({'left' : '250px','opacity' : '1'},$VelocidadAnimacion);
			});
					
		e.preventDefault();
		});
				
		$VistaPrevia.find('.pagina_miniatura').bind('click',MostrarImagenGrande);// vista previa invoca a MostrarImagenGrande()
				
		function MostrarImagenGrande()
			{
			$('#foto_grande').remove();
			var $ImagenMediana 	= $(this);
			$ImagenMediana.unbind('click');
			var FuenteImagenGrande = $ImagenMediana.attr('alt');// se obtiene la fuente imagen grande

			$SuperPosicion.fadeIn(200);//opacidad
			$ImagenMediana.stop().animate({'width' : '600px','height' : '447px'},447,function()
				{
				$('<img id = "foto_grande"/>').load(function()
					{
					var $ImagenGrande = $(this);
					$ImagenGrande.insertAfter($ImagenMediana).show();
					$ImagenMediana.hide().css({'left' : '310px','opacity' : 1,'z-index' : 1,'width'	 : '360px','height' : '268px'});
					$ImagenGrande.bind('click',function()
						{
						$ImagenMediana.show();
						$SuperPosicion.fadeOut(200);
						$(this).stop().animate({'width'	: '360px','height' : '268px'},500,function()
							{
							$(this).remove();
							$ImagenMediana.css({'z-index' : 9999});
							$ImagenMediana.bind('click',MostrarImagenGrande);
							});// stop animate foto mediana, la remueve y MostrarImagenGrande 
						});//acaba imagen grande clic
					}).attr('src',FuenteImagenGrande);//acaba load imagen grande
				});//stop.animate imagen grande, obtiene la imagen grande y la asigna
			}
		
		$(window).resize(function() 
			{
			var NuevaAltura	= $(window).height();
			$TiraImagenes.css('height',NuevaAltura);
			AlturaVentana = NuevaAltura;
			});
				
		function ConstruirTiraDesplazable()
			{
			totalcontenido = (LongitudScrollContenido - 1) * AlturaImagen;
			$TiraImagenes.css('height',AlturaVentana).mousemove(function(e)
				{
				if($ScrollContenedor.height() > AlturaVentana)
					{
					var CordenadasMouse	= (e.pageY - this.offsetTop);//cordenadas del mouse
					var mousePercentY   = CordenadasMouse / AlturaVentana;
					var destY		    = -(((totalcontenido - (AlturaVentana - AlturaImagen)) - AlturaVentana) * (mousePercentY));
					var thePosA		    = CordenadasMouse - destY;
					var thePosB		    = destY - CordenadasMouse;
					
					if(CordenadasMouse == destY)
						{
						$ScrollContenedor.stop();
						}
					else if(CordenadasMouse > destY)
						{
						$ScrollContenedor.stop().animate({top: -thePosA},$VelocidadAnimacion,$TipoEase);
						}
					else if(CordenadasMouse < destY)
						{ 
						$ScrollContenedor.stop().animate({top: thePosB},$VelocidadAnimacion,$TipoEase);
						}
					}
				}).find('.ImagenDeScroll').fadeTo($VelocidadDesvanecido, 0.6).hover(//hover con dos parametros con funcion
				function(){//mouse over desvanecido(fadeTo 1) en imagen over de la tira  
					$(this).fadeTo($VelocidadDesvanecido, 1);
					},
				function(){//mouse out desvanecido(fadeTo 0.6)en imagen out de la tira 
					$(this).fadeTo($VelocidadDesvanecido, 0.6);
					}
				);
			}
		
		});
  #2 (permalink)  
Antiguo 06/11/2013, 00:08
Avatar de CMushroom  
Fecha de Ingreso: diciembre-2011
Ubicación: Morelos
Mensajes: 99
Antigüedad: 12 años, 10 meses
Puntos: 1
Respuesta: Explicacion de cualquier pedazo de codigo

Hay los siento no se como moverlo a jquerty me equivoque otra vez .No pasara nuevamente.
  #3 (permalink)  
Antiguo 06/11/2013, 03:03
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 10 meses
Puntos: 206
Respuesta: Explicacion de cualquier pedazo de codigo

Toma, aquí lo explica todo, incluso tiene buscador.
http://api.jquery.com/

Etiquetas: funcion, javascript, ventana
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




La zona horaria es GMT -6. Ahora son las 01:46.