Foros del Web » Programando para Internet » Javascript »

aplicar una funcion a objetos en el documento HTML

Estas en el tema de aplicar una funcion a objetos en el documento HTML en el foro de Javascript en Foros del Web. Hey como estan? mi problema es que quiero activar esta funcion: Código HTML: <script> var loader = document.getElementById('la-anim-loader'); var border = document.getElementById('la-anim-border'); var α = ...
  #1 (permalink)  
Antiguo 18/12/2013, 19:00
Avatar de aado29  
Fecha de Ingreso: junio-2012
Ubicación: Miami, United States
Mensajes: 29
Antigüedad: 7 años, 5 meses
Puntos: 0
Pregunta aplicar una funcion a objetos en el documento HTML

Hey como estan? mi problema es que quiero activar esta funcion:
Código HTML:
<script>
			var loader = document.getElementById('la-anim-loader');
			var border = document.getElementById('la-anim-border');
			var α = 0;
			var π = Math.PI;
			var t = 15;
			var tdraw;
			var inProgress = false;

			function PieDraw() {
				α++;
				α %= 360;
				var r = ( α * π / 180 )
				var x = Math.sin( r ) * 250
				var y = Math.cos( r ) * - 250
				var mid = ( α > 180 ) ? 1 : 0
				var anim = 'M 0 0 v -250 A 250 250 1 ' + mid + ' 1 ' +  x  + ' ' +  y  + ' z';

				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
				var por = Math.floor((α*100)/360);
				document.getElementById('porcent').innerHTML=por+"%";
				var el = document.querySelector('.la-anim > svg');
				var anim = el.getAttribute('data-por');
				var grados = (anim*360)/100;
				if( α < grados )
				tdraw = setTimeout(PieDraw, t); // Redraw
			}

			function PieReset() {
				clearTimeout(tdraw);
				var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
			}

			$(document).on( 'scroll', function() {
				if ($(document).scrollTop()===($(document).height()-$(window).height())){
					if( inProgress ) {return false};
					inProgress = true;
					PieDraw();
				}
			});
		</script> 
a varios objetos en mi HTML como estos:

Código HTML:
<div class="la-anim">
				<svg data-por="75" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewbox="0 0 500 500">
					<path id="la-anim-border" transform="translate(250, 250)"/>
					<path id="la-anim-loader" transform="translate(250, 250) scale(0.65)"/>
				</svg>
			</div> 
solo consigo activarlo

Etiquetas: Ninguno
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 20:46.