Rotate an image in Mobile with Javascript

Question

Rotate an image in Mobile with Javascript

Navigation

#1 by (1 votes)

0

I am trying to make an image (particularly a roulette), rotate via css / javascript, for an application made in Jquery mobile and packaged in phonegap. With the code that I have, in PC, it turns perfectly, but when installing it in the cell phone, it does not. Any solution? I leave the code:

var imgruleta = document.getElementById('imgruleta');
girar.on('tap', function() {
	girar.hide();
	  imgruleta.style.animationName = '';
	  setTimeout(function(){
		  imgruleta.className = 'hacergirar';
		  imgruleta.style.transform = 'rotate(8000deg)';
		  /*imgruleta.style.animationName = 'girar';*/},500)
	if(!primeraEjecucion){
		resultado.text('');
	}
	primeraEjecucion = false;
	cont++;
	var pos;
	do{
		pos = Math.floor(Math.random() * vComidas.length);
	}while(pos == actual || pos == 0)
	actual = pos;
	verIngr.hide();
	setTimeout(function() {
		resultado.text(vComidas[pos].plato);
		resultado.show(); 
		girar.show()
		girar.val("Girar de nuevo!");
		girar.button("refresh");
		imgruleta.style.transform = '';
		imgruleta.className = '';

		$('#ver main').html('');
		
		if(vComidas[pos].ingredientes.length > 0){
			verIngr.show();
			var h3= $('<h3></h3>');
			h3.text(vComidas[pos].plato);
			$('#ver main').append(h3);
			var divlista = $('<div id="divingr" data-role="listview"></div>');
			var p;
			var hr;
			/*var ul = $('<ul data-role="listview"></ul>');
			var li;*/
			for(var i in vComidas[pos].ingredientes)
			{
				p = $('<p class="listaingr"></p>');
				p.text(vComidas[pos].ingredientes[i]);
				hr = $('<hr />');
				divlista.append(p);
				divlista.append(hr);
			}
			$('#ver main').append(divlista);
			//divlista('refresh');
			div.listview().listview('refresh');
		}
		else{
			verIngr.hide();
		}
    },5500);
	
});

.hacergirar{
	transition: 5s cubic-bezier(.31,.89,.49,.99);
}

  	<main role="main" class="ui-content" >
	<img src="recursos/imagenes/ruleta2.png" alt="ruleta decididora" id="imgruleta" />
	<p id="platoelegido"></p>
	<input type="button" value="Girar!" />
	<a href="#ver" id="veringr" data-role="button" data-iconshadow="false">Ver ingredientes</a>
	</main>

android javascript jquery phonegap jquery-mobile

asked by Cecilia 06.03.2017 в 23:51

source

1 answer

Create script to generate domain users in Powershell How to install "font awesome" in angular2 with angular-cli?

score 1 · Answer 1

Well, I was able to replicate your example, and I could see that the function girar is invoking it, but it is not created, nor is it because you use that girar.hide() , since I do not see that method either, so here I leave the image spinning.

var imgruleta = document.getElementById('imgruleta');
var btn_girar = document.getElementById('btn_girar');

btn_girar.addEventListener("click", function(){
    girar();
});

function girar(){
		
		imgruleta.style.animationName = '';
	  setTimeout(function(){
		  imgruleta.className = 'hacergirar';
		  imgruleta.style.transform = 'rotate(8000deg)';
		  /*imgruleta.style.animationName = 'girar';*/},500)
	if(!primeraEjecucion){
		resultado.text('');
	}
	primeraEjecucion = false;
	cont++;
	var pos;
	do{
		pos = Math.floor(Math.random() * vComidas.length);
	}while(pos == actual || pos == 0)
	actual = pos;
	verIngr.hide();
	setTimeout(function() {
		resultado.text(vComidas[pos].plato);
		resultado.show(); 
		girar.show()
		girar.val("Girar de nuevo!");
		girar.button("refresh");
		imgruleta.style.transform = '';
		imgruleta.className = '';

		$('#ver main').html('');
		
		if(vComidas[pos].ingredientes.length > 0){
			verIngr.show();
			var h3= $('<h3></h3>');
			h3.text(vComidas[pos].plato);
			$('#ver main').append(h3);
			var divlista = $('<div id="divingr" data-role="listview"></div>');
			var p;
			var hr;
			/*var ul = $('<ul data-role="listview"></ul>');
			var li;*/
			for(var i in vComidas[pos].ingredientes)
			{
				p = $('<p class="listaingr"></p>');
				p.text(vComidas[pos].ingredientes[i]);
				hr = $('<hr />');
				divlista.append(p);
				divlista.append(hr);
			}
			$('#ver main').append(divlista);
			//divlista('refresh');
			div.listview().listview('refresh');
		}
		else{
			verIngr.hide();
		}
    },5500);
	

}

.hacergirar{
	transition: 5s cubic-bezier(.31,.89,.49,.99);
}

<main role="main" class="ui-content" >
	<img src="recursos/imagenes/ruleta2.png" alt="ruleta decididora" id="imgruleta" />
	<p id="platoelegido"></p>
	<input type="button" value="Girar!" id="btn_girar" />
	<a href="#ver" id="veringr" data-role="button" data-iconshadow="false">Ver ingredientes</a>
	</main>