Defilement a la iphone

Télécharger le projet
Commenter

Description

le script sert a faire defiler des images, textes ...etc a la facon d'un ecran tactile en poussant avec la souris et plus on est rapide plus la vitesse est rapide il y a bien evidement la deceleration, on peut aussi faire avancer les images avec la souris ou la molette et pour stopper le tout il suffit de cliquer et enfin on peut aussi cliquer sur un element qui enclenche une fonction qui peut etre modifier afin d'executer ces propres commandes .

page teste

Source / Exemple : 

function kphone(el,vitesse){

 this.tbvar=[0,0,0,0,0,0];
 this.inter='vide';
 this.elem=document.getElementById(el);
 this.vitesse=vitesse*100; //vitesse de deplacement
 this.xx='';
 this.yy='';
 var that=this;

 this.elem.onmousedown=function(event){that.temp(event)};
  
 this.xx= function(ev){that.selecte(ev)}
 this.yy=function(s){that.deplace.call(that,s)}
 this.zz=function(s){that.temp2.call(that,s)}
 
 
 this.deceleration=function(){

  if(that.tbvar[2]<0.1){
   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]-=50;
 }
 
 this.init();

}



kphone.prototype.selecte=function(ev){

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

}


kphone.prototype.deplace=function(s){

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

 typeof this.decx == 'undefined' ? this.decx = s.clientX : null;
 
 if(this.tbvar[5] == 0){
  this.decx = s.clientX;
  this.tbvar[5] = 1 
 }
 this.elem.scrollLeft=this.elem.scrollLeft+((this.decx-s.clientX ));
 this.decx=s.clientX;
}


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

 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='';
 
}


kphone.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()*1000));
 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])*this.vitesse);
 this.tbvar[2]=((vitesse*vitesse)/2000)/2;
 this.tbvar[3]=vitesse/100;
 this.tbvar[4]=this.tbvar[3]/this.tbvar[2];
 
 if(this.tbvar[1] < 1 && this.tbvar[1] > -1 && this.inter=='vide'){
  this.clic(s);
  return false;
 }
 
 if(this.tbvar[0]<500){
  
  this.inter=setInterval(this.deceleration,20);
 }
 
}


kphone.prototype.clic=function(e){

 var el=typeof window.addEventListener == 'undefined' ? e.srcElement : e.target;
 klog.logdial(el)
}


kphone.prototype.M_scroll=function(e){

 if(this.inter!='vide'){
 clearInterval(this.inter);
   this.inter='vide';
 }
 
 var delta = 0;
 delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3);
 var val=((delta<0) ? 100 : -100)
 this.elem.scrollLeft=this.elem.scrollLeft+val;
},


kphone.prototype.selecte=function(ev){
 (navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
},


kphone.prototype.init=function(){
 
 var that=this;
 
 if(navigator.appName.substring(0,5)=="Micro"){

  this.elem.attachEvent('onmousewheel',function(e){that.M_scroll.call(that,e)});
  this.elem.attachEvent('onmousewheel', this.selecte);
 }
 else{

  var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel');
  this.elem.addEventListener(elmouse, function(e){that.M_scroll.call(that,e)}, false);
  this.elem.addEventListener(elmouse, this.selecte, false);
 }
}

Conclusion :

ca marche
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)