Bouton rotatif

Description

c'est une classe pour mettre des boutons rotatif que l'on fait tourner avec la souris.

ne fonctionne pas avec ie 7 et 8

Source / Exemple :


function bouplio(conteneur,bouton){
	
	this.conte=document.getElementById(conteneur);
	this.bout=document.getElementById(bouton);
	var that=this;
	
	this.boupliev=function(e){
		
		e.preventDefault();
		that.boupli(e);
		var dde=document.documentElement;
		
		dde.addEventListener("mousemove", that.boupli, false);
		dde.addEventListener("mouseup", that.bouplino, false);
	}

	this.bouplino=function(e){

		var dde=document.documentElement;
		
		dde.removeEventListener("mousemove", that.boupli, false);
		dde.removeEventListener("mouseup", that.bouplino, false);
	}
	
	this.boupli=function(e){

		var lui=that.conte;
		var el=that.bout;
		var dde=(navigator.vendor) ? document.body : document.documentElement;
						
		var X =((lui.offsetLeft+(lui.offsetWidth/2))-(e.clientX + dde.scrollLeft));
		var Y =((lui.offsetTop+(lui.offsetHeight/2))-(e.clientY + dde.scrollTop));
		
		var alpha=Math.round((Math.atan(Y/X))*(180/Math.PI))+90;
		var alpha2=alpha
		
		if(X>=0){
			alpha=alpha+180;
		}
		
		alpha2=((1/360)*alpha).toFixed(2);
		document.getElementById('inp1').value='X:'+X+'   Y:'+Y;
		document.getElementById('inp2').value=alpha+'°';
		document.getElementById('inp3').value=alpha2;
		
		var effet='rotate('+alpha+'deg)';

		el.style.WebkitTransform=effet;
		el.style.OTransform=effet;
		el.style.MozTransform=effet;
		el.style.msTransform=effet;
	}
	
	this.bout.addEventListener('mousedown', this.boupliev, false);
	
	}
	
	onload=init
	
	function init(){
	boubou1=new bouplio('dgbout','oria');
	boubou2=new bouplio('dgbout2','oria2');
	boubou3=new bouplio('dgbout3','oria3');
	}

Conclusion :


il ne reste plus qu'a trouver une utilité a la source

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.