begin process at 2012 05 28 13:22:37
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > DEFILEMENT A LA IPHONE

DEFILEMENT A LA IPHONE


 Information sur la source

Note :
8,8 / 10 - par 5 personnes
8,80 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :tactile, iphone, diaporama, defilement Niveau :Débutant Date de création :28/09/2010 Date de mise à jour :01/06/2011 21:25:28 Vu / téléchargé :9 155 / 1 313

Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (18)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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 aussi une deceleration, on peut aussi faire avancer les images avec la souris et pour stopper le tout il suffit de cliquer.

j'ai l'impression que mon script vas en interresse plus d'un ?

Source

  • <script language="JavaScript">
  • tbvar=new Array(0,0,0,0,0)
  • function selecte(ev){
  • (navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
  • }
  • function temp(s){
  • var dde=document.documentElement;
  • s =(!s) ? window.event : s;
  • var setX =s.clientX + dde.scrollLeft;
  • var datee=new Date();
  • var ms=(datee.getMilliseconds()+(datee.getSeconds()*1000));
  • tbvar[0]=ms;
  • tbvar[1]=setX;
  • document.all ? dde.attachEvent("onmousemove", selecte) : dde.addEventListener("mousedown", selecte, false);
  • }
  • function temp2(s){
  • var dde=document.documentElement;
  • s =(!s) ? window.event : s;
  • var setX =s.clientX + dde.scrollLeft;
  • var datee=new Date();
  • var ms=(datee.getMilliseconds()+(datee.getSeconds()*1000));
  • tbvar[0]=ms-tbvar[0];
  • tbvar[1]=tbvar[1]-setX;
  • document.all ? dde.detachEvent("onmousemove", selecte) : dde.removeEventListener("mousedown", selecte, false);
  • var vitesse=Math.round((tbvar[1]/tbvar[0])*1000);
  • tbvar[2]=((vitesse*vitesse)/2000)/2;
  • tbvar[3]=vitesse/100;
  • tbvar[4]=tbvar[3]/tbvar[2];
  • deceleration();
  • }
  • function deceleration(){
  • if(tbvar[2]<0.1 || tbvar[2]==0){
  • return false;
  • }
  • tbvar[3]=tbvar[2]*tbvar[4];
  • document.getElementById('mondiv').scrollLeft=document.getElementById('mondiv').scrollLeft+tbvar[3];
  • tbvar[2]-=10;
  • setTimeout(deceleration,10);
  • }
  • </script>
<script language="JavaScript">

tbvar=new Array(0,0,0,0,0)

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

function temp(s){

var dde=document.documentElement;
s =(!s) ? window.event : s;
var setX =s.clientX + dde.scrollLeft;
var datee=new Date();
var ms=(datee.getMilliseconds()+(datee.getSeconds()*1000));
tbvar[0]=ms;
tbvar[1]=setX;
document.all ? dde.attachEvent("onmousemove", selecte) : dde.addEventListener("mousedown", selecte, false);
}

function temp2(s){

var dde=document.documentElement;
s =(!s) ? window.event : s;
var setX =s.clientX + dde.scrollLeft;
var datee=new Date();
var ms=(datee.getMilliseconds()+(datee.getSeconds()*1000));
tbvar[0]=ms-tbvar[0];
tbvar[1]=tbvar[1]-setX;
document.all ? dde.detachEvent("onmousemove", selecte) : dde.removeEventListener("mousedown", selecte, false);
var vitesse=Math.round((tbvar[1]/tbvar[0])*1000);
tbvar[2]=((vitesse*vitesse)/2000)/2;
tbvar[3]=vitesse/100;
tbvar[4]=tbvar[3]/tbvar[2];
deceleration();
}

function deceleration(){

if(tbvar[2]<0.1 || tbvar[2]==0){
return false;
}
tbvar[3]=tbvar[2]*tbvar[4];
document.getElementById('mondiv').scrollLeft=document.getElementById('mondiv').scrollLeft+tbvar[3];
tbvar[2]-=10;
setTimeout(deceleration,10);
}

</script>

 Conclusion

ca marche

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

29 septembre 2010 11:51:09 :
optimisation
12 décembre 2010 18:00:07 :
ajout de la possibilite de faire avancer le tableau avec la souris
14 janvier 2011 12:07:15 :
fonction globale
14 janvier 2011 12:34:01 :
copyright
24 janvier 2011 14:25:37 :
debogage
01 juin 2011 21:25:30 :
ajout d'une source en verticale

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture DIAPORAMA SIMPLE PAR IFRAME par sartoz
Source avec Zip Source avec une capture DIAPO EN CSS 3D par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip Source avec une capture DEFILEMENT D'IMAGE PAR TABLEAU par kazma

Commentaires et avis

Commentaire de DiabloBros le 29/09/2010 03:13:06 7/10

Très sympa, j'aime beaucoup. Simple, prend pas trop de ressource, nan c'est très bien, le seul petit reproche que je ferai c'est que ce n'est pas infinie ^^ ya une limite a gauche comme a droite , il faudrait pouvoir lui dire de redémarré la séquence une fois en bout mais bon c'est deja super , merci bien.

Commentaire de jdmcreator le 30/09/2010 03:18:03

Bonjour,

Très bien mais si on tient longtemps et on fait un petit coup très sèche vers la droite, cela n'avancera pas. Il faudrait revoir l'algorythme pour plutôt calculer la différence entre le mouvement de la souris au lâcher, et quelques secondes avant... ou quelque chose du genre.

Commentaire de moaleboss le 30/09/2010 10:40:04 9/10

Excellente source, je l'ai juste testé sous FF 3.6.10, ça marche nickel. Seul reproche que je pourrai lui faire (bah oui, faut bien en faire un :p), c'est qu'on ne peut pas déplacer le bandeau à la souris, il faut obligatoirement une impulsion... ou alors c'est moi qui ais merdé, je sais pas :p
Je garde dans un coin pour une utilisation proche ;-)
Merci !!

Commentaire de kazma le 30/09/2010 17:20:01 administrateur CS

DiabloBros

faire tourner en boucle c'est pas possible

jdmcreator

j'ai penser a la meme chose  mais mon soucis vient des evenement j'avait penser faire quelque chose avec l'evenement dragstart mais malheuresement sa ne marche pas en gros le soucis vient du fait que quand on fait onmousedown on declanche la fonction temp qui vas noter la position de la souris et le temp ensuite a onmouseup on refait la meme chose puis soustraction et division afin de connaitre la vitesse c'est pour sa que j'ai penser a ondragstart pour declancher la fonction temp au bon moment.

moaleboss

c'est aussi un soucis d'evenement sinon je pense que l'on pourait mettre un deplacement avec la molette mais je sais pas si sa vaut le coup.

Commentaire de kirk57 le 04/10/2010 08:46:45

@Kazma
Pourquoi faire tourner en boucle ne fonctionnerais pas?
Il y a bien des carrousels qui fonctionnent en boucle, je pense qu'il suffit de copier quelques éléments à gauche et à droite, et lors des évènements de vérifier si l'on arrive bientôt en bordure et de déplacer les éléments à la suite.
Cela dit, je n'ai pas le niveau en javascript pur pour pouvoir t'aider, c'était juste une remarque car j'utilise un carrousel en jQuery qui utilise ce principe pour boucler indéfiniment.
Sinon, bonne source mais il manque quand même un peu de commentaires.
Certes ta source n'est pas très compliquée à comprendre mais je crois qu'il faut prendre l'habitude de commenter son code afin que quiconque veut le modifier/corriger si retrouve plus rapidement.
Sur ce, bon courage pour la suite et continue à proposer des sources intéressantes comme tu le fait.

Commentaire de mango26 le 04/10/2010 09:12:33

Excellent script, il va faire des heureux...

Commentaire de arta le 05/10/2010 06:28:41

Bonjour tous

Pour suivre, s'il y a la fonction boucle !

Commentaire de moaleboss le 06/10/2010 00:11:39

@Kazma : Un drag and drop standard suffirait je pense.

Commentaire de anacoana le 06/10/2010 01:01:15 9/10

Bonsoir, et pour commencer Bravo !

Cependant, je reste d'accord avec le commentaire de Moaleboss, c'est dommage que cela ne fonctionne pas dès le drag & drop !
Car malheureusement même si ce script est très bien, et qu'il me permettra de l'utiliser un jour (prochain, et sans oublier de citer son créateur), il resterait très difficile de s'en servir comme un iPhone en affichant une seule image. en effet, le mouvement d'impulsion serait bien court, et très peu "contrôlable".
Sans penser à l'ergonomie, instinctivement sur le web on pense d'abord drag & drop et non pas "lancé d'image".
Nombre de gens resterait bloquer sur l'image sans savoir (ni penser) comment faire. Et avouez que ca serait gênant

Allé, je suis sur qu'on peut cumuler ces fonctions en JS, et ainsi m'éviter le jour où j'en aurais besoin de le faire en flash ;o))

En tout cas, je préfère préciser, je pinaille ici (car il le faut quand on cherche toujours mieux ;) et encore bravo pour ce script que j'attribue d'un 9/10, pour les raisons que je cite.

En espérant revenir lors d'une mise à jour améliorer la note ^^

Merci

Ps : ca marche même très bien sur IE9 Beta, double clap clap !!

Commentaire de jdmcreator le 06/10/2010 01:21:34

Bonjour,

Pour faire fonctionner mon idée, il faudrait que tu sauvegardes  à chaque moment la position de la souris dans un Array. Puis que tu calcule la différence entre les derniers éléments selon le temps que tu mets entre chaque "sauvegarde".

Commentaire de pierremusic le 12/12/2010 13:16:21

Je viens de mettre ce script sur mon site. C'est du plus bel effet, j'adore !
Merci beaucoup beaucoup.
Par contre, je trouve assez comique pour un script qui est censé reproduire le défilement de l'iphone, qu'il fonctionne mal sur Safari !
Mais tant pis, je l'aime trop ! Les utilisateurs de Safari n'auront qu'à aller voir mes vidéos !
Exemple du script dans la partie Voir => Photos sur www.pierremusic.com

Commentaire de pierremusic le 12/12/2010 16:18:13 10/10

Ne fonctionne pas non plus sous Google Chrome...
Je n'y connais rien donc c'est pas une critique, mais si quelqu'un apporte un correctif, je prends ! :)

Commentaire de kazma le 12/12/2010 18:04:16 administrateur CS

je vient de l'essayer sur chrome 8 et sa marche ? retelecharge le zip car je vient de mettre une nouvelle version qui donne la posibilite de déplacer le bandeau à la souris

Commentaire de pierremusic le 12/12/2010 21:52:55

Je viens d'installer la version 8.0.552.215 de Google Chrome et ca ne fonctionne pas beaucoup mieux !
http://www.pierremusic.com/voir/photos_defaut.htm
Je vais retélécharger le zip comme tu me l'indiques.
Néanmoins, je ne comprends pas ce que tu veux dire par "déplacer le bandeau à la souris" ...

Commentaire de pierremusic le 12/12/2010 22:09:03

C'est bon je sais d'où vient ma bétise !
Et j'ai compris aussi "déplacer le bandeau à la souris"...
Néanmoins, il me reste à savoir comment agrandir les photos, en utilisant les pourcentages et que ca marche ! :)
Si tu regardes comment c'est actuellement sous mozilla, j'ai mis dans % au lieu des px
Ca permet d'optimiser la taille des images en fonction de la résolution d'écran de l'utilisateur. Cependant, avec ton script, sous Chrome et Safari, ca fonctionne pas.
Moi perso, ca me dérange pas. Pour mon site en tout cas. Mais je pense qu'il y en a qui vont chercher à trouver d'où vient la faille et la corriger. Je garde l'oeil sur cette page =)
Merci beaucoup en tout cas sur ce script.
Au passage, j'ai pas vu de signature dans le script...?!
++

Commentaire de ThomasBarg le 01/06/2011 15:00:45

Bonjour à tous,

Y'as t-il une possibilité d'avoir la même chose en vertical ?

Merci

Commentaire de kazma le 01/06/2011 21:30:04 administrateur CS

retelecharge le zip j'y ai ajouter un fichier qui le fait en vertical

Commentaire de incode le 11/05/2012 21:41:39 9/10

Excellent, je l'ai utilisé dans "liquid design" que j'ai créer pour un client. Pour moi c'est carton!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

descendre la barre de defilement en bas ! [ par Stephane ] salutvoila j'ai un cadre IFrame, je voudrais qu'a un certain moment, la barre de défilement aille tout en bas. je pense que vous comprendrez mieu si j Defilement d'une scroll bar [ par zipzip ] Diaporama javascript [ par standoff ] defilement d'un fond [ par kinooo ] SVP!!! configurer diaporama [ par el gringo ] Bonjour à tous,Je développe actuellement mon site internet et afin de présenter mes différentes illustrations j'aimerais inclure des diaporamas.Malheu diaporama [ par jcb54 ] bonjourqui pourra me depanner je viens de copier un script sur jejavascript et je suis bloquer sur la premiere image je ne comprend pas bien la fonct Defilement d image [ par RAPHAI ] Bonjour a tous,J aimerais faire defiler des images a l aide de curseurs. Le probleme est que je n ai aucune idee de comment faire!Je dois les faire de Controle SlideShow [ par Miloflyer ] Bonjours a tous. J'ai trouver cet bribe de code qui permet de faire une sorte de petit diaporama avec des photos, mais j'aimerai l'adapter... J'aimera diaporama [ par morgandetoi06 ] bonjour, j ai voulu faire un diaporama en PHP/JSmaius il ne marche pas et je ne voit pas pksvp aidez moi: voila le code que j ai fait merci de me donn lien sur photos en javascript [ par missFlo17 ] Bonjour bonjour,Voilà, j'ai un diaporama de photos en javascript et j'aimerai que chaque photo correspond à un lien vers une page (1 page différente p


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,248 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales