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