Diapo en css 3d

Télécharger le projet
Commenter

Description

et encore une source ce coup ci il s'agit comme son l'indique d'un diapo en css 3d il fonctionne pour l'heure avec safari chrome et firefox 10

page teste

Source / Exemple : 

tbgema= new Array('5.jpg','32.jpg','33.jpg','34.jpg','71.jpg','78.jpg','83.jpg','89.jpg','92.jpg')

var kdi3={
controle:0,
face:0,
vaval:0,
suite:0,
elem:'null',
oxo:0,
setY:0,

azerty:function(sens){   //gestion du mouvement de rotation du diapo

  if(this.controle==0){

   this.face==0 ? this.face=1 : this.face=0;

   if(sens=='plus'){
    this.suite+=1
    if(this.suite==tbgema.length){
     this.suite=0
    }
    this.vaval+=180
    this.elem.getElementsByTagName('div')[this.face].style.cssText='background-image:url(images/'+tbgema[this.suite]+')';
    this.elem.style.WebkitTransform='rotateY('+this.vaval+'deg)';
    this.elem.style.MozTransform='rotateY('+this.vaval+'deg)';
   }

   else{
    this.suite-=1
    if(this.suite==-1){
     this.suite=tbgema.length-1
    }
    this.vaval-=180
    this.elem.getElementsByTagName('div')[this.face].style.cssText='background-image:url(images/'+tbgema[this.suite]+')';
    this.elem.style.WebkitTransform='rotateY('+this.vaval+'deg)';
    this.elem.style.MozTransform='rotateY('+this.vaval+'deg)';
   }

   this.controle=1
   setTimeout(function(){kdi3.controle=0},2000)

  }
 },

fonfon:function(ch){  //gestion du sens de rotation du diapo

  if(this.controle==0){
   if(ch > this.suite){
    this.suite=ch-1
    var sens='plus'
   }
   else{
    this.suite=ch+1
    var sens='moins'
   }
   this.azerty(sens)
  }
 },

sensa:function(e){  //le defilement des miniatures

  var ixe=kdi3.setX;
  var clic=document.getElementById('clic')

  if(arguments[0]=='depart'){
   document.addEventListener("mousemove", kdi3.posi, false)
   clic.setAttribute('onmouseover','')
   kdi3.oxo=setInterval(kdi3.sensa,50)
   return false
  }

  if((ixe > clic.offsetLeft && ixe < (clic.offsetLeft+clic.offsetWidth)) && (kdi3.setY > clic.offsetTop && kdi3.setY < (clic.offsetTop+clic.offsetHeight))){

   var oml=(clic.offsetLeft+(clic.offsetWidth/2))-ixe;
   if(oml>50 || oml<-50){
    clic.scrollLeft=clic.scrollLeft-(oml/14);
   }
  }
  else{
   kdi3.anul()
  }
 },

anul:function(){  //gestion des evenements pour le defilement des miniatures

  clearInterval(kdi3.oxo)
  document.removeEventListener("mousemove", kdi3.posi, false)
  clic.setAttribute('onmouseover','kdi3.sensa("depart",event)')
 },

posi:function(s){  //position de la souris pour le defilement des miniatures et les limites de defilement

  var dde=(navigator.vendor) ? document.body : document.documentElement;
  s =(!s) ? window.event : s;
  kdi3.setX =s.clientX + dde.scrollLeft;
  kdi3.setY =s.clientY + dde.scrollTop;
 },

init:function(s){  // creation dynamique des elements composant l'ensemble du diapo

  var elem=document.createElement('div')
  var elem2=document.createElement('div')
  var elem3=document.createElement('div')
  elem.setAttribute('class','sous_container');
  elem2.setAttribute('class','faceA');
  elem3.setAttribute('class','faceB');
  elem2.style.cssText='background:url(images/5.jpg)';
  elem3.style.cssText='background:url(images/32.jpg)';
  elem.appendChild(elem2);
  elem.appendChild(elem3);
  kdi3.elem=document.getElementById("container").appendChild(elem);
  
  var elem=document.createElement('img')
  var elem2=document.createElement('img')
  elem.src='images/retour.png'
  elem2.src='images/aller.png'
  elem.setAttribute('onclick','kdi3.azerty("moins")')
  elem2.setAttribute('onclick','kdi3.azerty("plus")')
  document.getElementById('kbouton').appendChild(elem);
  document.getElementById('kbouton').appendChild(elem2);
  
  var tatable= document.createElement('table')
  tatable.id='cloc'
  var tbrow=tatable.insertRow(-1)

  for(var j=0;j<tbgema.length;j++){
   tbrow.insertCell(j)
   var gema=document.createElement('img')
   gema.src='images/'+tbgema[j]
   tbrow.cells[j].setAttribute('onclick','kdi3.fonfon('+j+')')
   tbrow.cells[j].appendChild(gema);
  }
  document.getElementById('clic').appendChild(tatable);
  document.getElementById('clic').setAttribute('onmouseover','kdi3.sensa("depart",event)')
 }

}
onload=kdi3.init  //initialisation du diapo

Conclusion :

vivement que les autres navigateurs supportent le css 3d
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)