Girar imagen sobre si misma

dezagus · #1 (**permalink**) 12/03/2012, 17:01

Logré que una imagen gire sobre si misma.
Pero el problema es que gira para un solo lado, necesito que gira para ambos lados, la cuestion es que es algo complejo (para mi, que no se casi nada de js).

Osea, actualmente funciona detectando cuando se hace clic con el mouse y comienza la rotación de la imagen hasta que se suelta el clic. La idea es que la imagen acompañe la direccion del mouse, osea no solo cuando hace clic, sinó cuando hace el movimiento y el lado para cual hace el movimiento, siempre, manteniendo su posicion en el centro.

Dejo el código aver si pueden echar una mano.
Gracias desde ya!

Código:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
#cont{ position:absolute; left:50%; top:50%; margin-top:-175px; margin-left:-250px; cursor:pointer; width:500px; height:350px;} 
#cont img{ position:relative} 
</style> 
<script type="text/javascript"> 


function rotate(angle){ 
    var rotation = Math.PI * angle / 180; 
    var costheta = Math.cos(rotation); 
    var sintheta = Math.sin(rotation);  
    if(!window.ActiveXObject){ 
        this.style.position='absolute'; 
		
        this.style.webkitTransform ='rotate('+angle+'deg)'; 
        this.style.khtmlTransform ='rotate('+angle+'deg)';   
        this.style.MozTransform='rotate('+angle+'deg)';     
        this.style.OTransform='rotate('+angle+'deg)'; 
        this.style.transform='rotate('+angle+'deg)';
		
		document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.webkitTransform = angle) / 360) * 360);
		document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.khtmlTransform = angle) / 360 * 360));
		document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.MozTransform= angle) / 360) * 360);
		document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.OTransform= angle) / 360) * 360);
		document.capcha.num.value= this.style.webkitTransform = angle - (parseInt((this.style.transform= angle) / 360) * 360);
		
		
		
    }else{ 
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')"; 
        this.filters.item(0).M11 = costheta; 
        this.filters.item(0).M12 = -sintheta; 
        this.filters.item(0).M21 = sintheta; 
        this.filters.item(0).M22 = costheta;  
        this.style.top= ((this.parentNode.offsetHeight/2)-(this.offsetHeight/2))+'px'; 
        this.style.left=  ((this.parentNode.offsetWidth/2)-(this.offsetWidth/2))+'px'; 
    } 
} 


var ns={} 
onload=function(){ 
    (function(){ 
    document.getElementById('im').onmousedown=function(){ 
        var _this=this; 
        ns.angulo=ns.angulo || 0; 
		/* ns.timmer=setInterval(function(){rotate.call(_this,ns.angulo+=5)},30);   GIRA PARA LA DERECHA */
        ns.timmer=setInterval(function(){rotate.call(_this,ns.angulo-=5)},30); 
    } 
    document.getElementById('im').onmouseup=function(){ 
        clearInterval(ns.timmer); 
    } 
    })(); 
} 


</script> 

</head> 

<body> 
<div id="cont"><img id="im" src="http://www.disegnocentell.com.ar/arwen.jpg" width="500" height="350" onMouseOut="javascript:clearInterval(ns.timmer);" /></div>
<form name="capcha" method="post" action="">
  <label>
  <input type="text" name="num">
  </label>
</form>
</body> 
</html>

Panino5001 · #2 (**permalink**) 13/03/2012, 10:21

Esto te puede dar una idea de cómo traducir el movimiento del mouse alrededor de un punto a grados:

Código PHP:

  <!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>

*{ margin:0; padding:0}

#centro,#punto{background:red; width:10px; height:10px; position:absolute; left:100px; top:100px;}

#log{ position:absolute; width:100px; height:30px; line-height:30px; font-size:10px; font-family:Verdana, Geneva, sans-serif; text-align:center; background:#F93; left:10px; top:210px;}

</style>

 
<script type="text/javascript">

function getAbsolutePosMouse(e){

    var ev=e || window.event;

    var xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft) || 0;

    var yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop) || 0;

    var posX=ev.clientX+xScroll;

    var posY=ev.clientY+yScroll;

    return {x:posX,y:posY}

}

function mover(e){

    var pos=getAbsolutePosMouse(e),el=document.getElementById('punto'),x,y,distX,distY,angle;

    x=(pos.x+10);

    y=(pos.y-10);

    el.style.left=x+'px';

    el.style.top=y+'px';

    distX=100-x;

    distY=100-y;

    angle=Math.atan2(distX,distY);

    if(angle<0)angle+=Math.PI*2;

    document.getElementById('log').innerHTML=angle*180/Math.PI;

    

}

document.onmousemove=mover;

</script>

</head>

 
<body>

<div id="centro"></div>

<div id="punto"></div>

<div id="log"></div>

</body>

</html>

Ya el resto depende de vos ;)

dezagus · #3 (**permalink**) 13/03/2012, 15:27

Mil gracias :) veré como hago para combinarlo!