Effet de rotation a 360° d'image avec acceleration deceleration

Télécharger le projet
Commenter

Description

c'est un effet de rotation a 360 degré avec plusieurs images utilisant la souris sur la zone ou ce situe l'image on peut aussi pousser l'image afin de créer un effet d?accélération décélération j'y est ajouter le préchargement des images afin d'assurer la fluidité de l'animation le script fonctionne avec firefox chrome opera et ie testé avec ie 8

++

page teste

Source / Exemple :

mode d'emploi

exemple pour 3 images 

function init360(){

var element="img360"     // le premier parametre c'est l'id du div conteneur.
var nombre_images=72     // le deuxieme parametre c'est le nombre d'image que comprend l'animation.
var prefix='mamage/image_'   // le troisieme parametre c'est le repertoire ou se trouve les images avec le prefix des images.
var vitesse=10      // le quatrieme parametre est la vitesse de deceleration initiale

k31=new k360(element,nombre_images,prefix,vitesse);  //instanciation


var element="img361"
var nombre_images=90
var prefix=mamage2/part_
var vitesse=10

k31=new k360(element,nombre_images,prefix,vitesse);

var element="img363"
var nombre_images=64
var prefix=mamage4/San
var vitesse=10

k31=new k360(element,nombre_images,prefix,vitesse);

}

typeof window.addEventListener == 'undefined') ? window.attachEvent("onload", init360) : window.addEventListener("load", init360);  // appel de la fonction d'initialisation au chargement de la page




function k360(el,nb,rep,vitesse){

 this.preImages=new Array;
 this.chiffre=0;
 this.chiffre2=0;
 this.nbimage=nb;
 this.vitesse=vitesse*100;
 this.repertoire=rep;
 this.extention='.jpg';  //extention, type d'image
 this.dema='ok';
 this.elem=null;
 this.inter='';
 this.tbvar=[0,0,0,0,0,0];
 this.gene=general=document.getElementById(el);
 this.xx='';
 this.yy='';
 this.zz='';
 var is=this;
  
 
 // prechargement des images et affichage du pourcentage de prechargement

 this.precharge=function(){
  
  if (arguments.length==1){
   var is=arguments[0]
  }
  else{
   var is=this
  }
  
  var valcomplet=0;
  var general=is.gene;

  if(is.dema=='ok'){
   is.dema='fin';

   for (var i = 1; i <=is.nbimage; i++) {
   
    var z = i<10 ? "0"+i : ""+i;
    is.preImages[i] = new Image();
    is.preImages[i].src =is.repertoire+z+is.extention;
   }

   var constrution=document.createElement('span');
   constrution.appendChild(document.createTextNode('00 %'));
   general.appendChild(constrution);
  }
  
  for (var i = 1; i < is.preImages.length; i++){
   if(is.preImages[i].complete==true){
    valcomplet++;
   }
  }
  general.getElementsByTagName("span")[0].childNodes[0].nodeValue=Math.round((100/is.nbimage)*valcomplet)+' %';
  if(valcomplet==is.nbimage){
   general.removeChild(general.getElementsByTagName("span")[0]);
   var constrution=document.createElement('img');
   constrution.style.height=is.preImages[1].height;
   constrution.style.width=is.preImages[1].width;
   constrution.src = is.preImages[1].src;
   is.elem=general.appendChild(constrution);
   
   
 this.elem.onmousedown=function(event){is.temp(event)};
 
 
 this.xx= function(ev){is.selecte(ev)}
 this.yy=function(s){is.posi.call(is,s)}
 this.zz=function(s){is.temp2.call(is,s)}
   
   is.lancer(200,300);
   return false;
  }
  setTimeout(function() {is.precharge(is)},100);
 }
 
 this.precharge();  //lancement de la fonction precharge a l'instanciation
 
  
  
 //operation de deceleration et de la rotation des images


 this.deceleration=function(){
 
  var that=is
 
  if(that.tbvar[2]<10){
   clearInterval(that.inter);
   that.inter='vide';
   return false;
  }
  
  that.tbvar[3]=that.tbvar[2]*that.tbvar[4];
  that.elem.scrollLeft=that.elem.scrollLeft+that.tbvar[3];
  that.tbvar[2]-=10;
  
  
  that.chiffre2=that.chiffre2+that.tbvar[3];

  if(that.chiffre2>(that.nbimage*10)){
   that.chiffre2=5;
  }

  if(that.chiffre2<5){
   that.chiffre2=that.nbimage*10;
  }
  
  var i=Math.round(that.chiffre2/10)
  var z = i<10 ? "0"+i : ""+i;
  that.elem.src = that.repertoire+z+that.extention;
  
 }
 
}
 
 
 k360.prototype.selecte=function(ev){

 typeof window.addEventListener == 'undefined' ? event.returnValue = false : ev.preventDefault();

}

 //rotation d'image avec la souris
 
 k360.prototype.posi=function(s){

 s =(!s) ? window.event : s;

 var dde=(navigator.vendor) ? document.body : document.documentElement;
 
  s =(!s) ? window.event : s;
  
  this.chiffre2=this.chiffre2+this.chiffre-s.clientX + dde.scrollLeft;

  if(this.chiffre2>(this.nbimage*10)){
   this.chiffre2=5;
  }

  if(this.chiffre2<5){
   this.chiffre2=this.nbimage*10;
  }

  var i=Math.round(this.chiffre2/10)
  
  var z = i<10 ? "0"+i : ""+i;
  
  this.elem.src = this.repertoire+z+this.extention;
  
  this.chiffre=s.clientX + dde.scrollLeft;
}
 
 

 //recupération du temp et de la position de la souris au moment du mousedown

 
 k360.prototype.temp=function(s){

 clearInterval(this.inter);

 this.tbvar[2]=0
 var dde=document.documentElement;
 var s =(!s) ? window.event : s;
 var datee=new Date();
 this.tbvar[0]=(datee.getMilliseconds()+(datee.getSeconds()*1000));
 this.tbvar[1]=s.clientX;
 var that=this;
 this.chiffre=s.clientX + dde.scrollLeft;

 if(typeof window.addEventListener == 'undefined'){
  dde.attachEvent("onmousemove", this.xx)
  dde.attachEvent("onmousemove", this.yy)
  dde.attachEvent("onmouseup", this.zz)
 }
 else{
  dde.addEventListener("mousedown",this.xx, false);
  dde.addEventListener("mousemove", this.yy, false);
  dde.addEventListener("mouseup",this.zz, false);
 }
 this.elem.onmousedown='';
 
}
 
 
 // recuperation du temp au mouseup et soustraction avec le temp recupéré precedement qui 
 //donne la durée ecoulé entre le mousedown et le mouseup on fait la meme chose avec la
 // position de la souris afin de recuperé la distance parcourue
 //de ces deux parametre on en deduit la distance parcourue en un temp T

 
 k360.prototype.temp2=function(s){
 
 var dde=document.documentElement;
 var s =(!s) ? window.event : s;
 var setX =s.clientX;
 var datee=new Date();
 var ms=(datee.getMilliseconds()+(datee.getSeconds()*this.vitesse));
 this.tbvar[0]=ms-this.tbvar[0];
 this.tbvar[1]=this.tbvar[1]-setX;
 var that=this;

 if(typeof window.addEventListener == 'undefined'){
  
  dde.detachEvent("onmousemove", that.xx)
  dde.detachEvent("onmousemove", that.yy)
  dde.detachEvent("onmouseup", that.zz)
 }
 
 else{
  dde.removeEventListener("mousedown", this.xx, false);
  dde.removeEventListener("mousemove", this.yy, false);
  dde.removeEventListener("mouseup",this.zz, false);
 }
 
 this.elem.onmousedown=function(event){that.temp(event)};
 
 this.tbvar[5]=0
 var vitesse=Math.round((this.tbvar[1]/this.tbvar[0])*1100);
 this.tbvar[2]=((vitesse*vitesse)/2000)/2;
 this.tbvar[3]=vitesse/100;
 this.tbvar[4]=this.tbvar[3]/this.tbvar[2];
 
 if(this.tbvar[0]<500){
  
  this.inter=setInterval(this.deceleration,10);
 }
 
}

 // lancemant apres chargement des images de la rotation

 k360.prototype.lancer=function(duree, deplacement){    

  this.tbvar[0]=duree;
  this.tbvar[1]=deplacement;

  this.tbvar[5]=0;
  var vitesse=Math.round((this.tbvar[1]/this.tbvar[0])*1100);
  this.tbvar[2]=((vitesse*vitesse)/2000)/2;
  this.tbvar[3]=vitesse/100;
  this.tbvar[4]=this.tbvar[3]/this.tbvar[2];
  
  if(this.tbvar[0]<500){
  
   this.inter=setInterval(this.deceleration,10);
   
  }
 }

Conclusion :

ca roule
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)