Vue style springboard, effet springboard page web |
Bienvenue invité ( Connexion | Inscription )
Vue style springboard, effet springboard page web |
14 Apr 2012, 12:11
Message
#1
|
|
Nouveau Membre Groupe : Membres Messages : 35 Inscrit : 4 Apr 2012 Membre no 175 725 |
Bonjour à tous,
Je commence à développer mon site web et j'aimerais bien savoir comment intégrer ce qui ressemble assez au système de l'iPhone (page d'accueil : le springboard). J'espère que la capture ci-jointe sera davantage intelligible. Merci par avance, Thomas. Ce message a été modifié par Titivay75 - 14 Apr 2012, 12:13.
Fichier(s) joint(s)
|
|
|
29 Apr 2012, 12:41
Message
#2
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 4 803 Inscrit : 1 Jul 2010 Membre no 156 073 |
Voici une solution en javascript (jQuery) qui fonctionne avec la souris ainsi qu'avec le geste tactile swipe (toucher-glisser). Tu peux simuler sur le Mac le geste tactile en faisant un cliquer-glisser (vers la gauche et vers la droite) sur les blocs de couleurs.
Code <!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Springboard cliquable et tactile avec jQuery animate et touchSwipe</title> <!-- Initialisation du viewport pour les mobiles --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Charger la librairie jQuery à http://code.jquery.com/jquery-1.7.2.min.js --> <script src="js/jquery-1.7.2.min.js"></script> <!-- Charger le plug-in jquery.touchSwipe à https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/blob/master/jquery.touchSwipe-1.2.5.js --> <script src="js/jquery.touchSwipe-1.2.5.js"></script> <style> #conteneur {width:400px; margin:0 auto; overflow:hidden;} #springboard {width:2000px; height:300px; overflow:hidden;} nav {width:360px; margin:0 auto; padding:20px; background-color:#ccc; text-align:center;} .bloc {width:400px; height:300px; float:left;} /* Couleurs pour différencier les blocs */ .bleu {background-color:blue;} .jaune {background-color:yellow;} .rouge {background-color:red;} .rose {background-color:pink;} .orange {background-color:orange;} </style> </head> <body> <div id="conteneur"> <div id="springboard"> <div id="blocs"> <div class="bloc bleu"></div> <div class="bloc jaune"></div> <div class="bloc orange"></div> <div class="bloc rose"></div> <div class="bloc rouge"></div> </div> </div> <nav> <a href="#" id="prec"><<<</a> | <a href="#" class="lienNav">0</a> - <a href="#" class="lienNav">1</a> - <a href="#" class="lienNav">2</a> - <a href="#" class="lienNav">3</a> - <a href="#" class="lienNav">4</a> | <a href="#" id="suiv">>>></a> </nav> </div> <script> // Variables // L'index du bloc actif var bA = 0; // Nombre d'éléments de classe .bloc dans #blocs var nbEnfants = 5; // Largeur des éléments de classe .bloc var wBloc = 400; // Durée d'animation exprimée en millisecondes var duree = 1000; // Définition des options de swipe : // La fonction glisser sera notifiée lorsque l'événement swipe sera diffusé // Une zone minimum de glisser de 50px pour que l'événement swipe soit diffusé var swipeOptions= { swipe:glisser, threshold:50 } // Fonctions $(function() { // On assigne le swipe à l'élément #springboard en passant les options en paramètre $("#springboard").swipe( swipeOptions ); }); // La fonction glisser notifiée lorsque l'événement swipe est diffusé // Cette fonction reçoit en paramètre l'événement et la direction du glisser function glisser(event, direction) { if(direction == "left") { if(bA > -(nbEnfants-1)){ bA--; deplacer(bA); } } else if(direction == "right"){ if(bA < 0){ bA++; deplacer(bA); } } } // La fonction appelée depuis glisser // Le paramètre reçu correspond à l'index du bloc à afficher function deplacer(pIndex) { bA = pIndex; $("#blocs").animate({ marginLeft: wBloc * pIndex}, duree ); } // Cette fonction sera déclenchée une fois que le DOM sera chargée $(document).ready(function(){ // Assigner le click aux liens de classe lienNav $(".lienNav").each(function( i ){ $(this).click(function(){ deplacer(-i); event.preventDefault(); }); }); // Assigner le click des liens SUIV et PREC $("a#prec").click(function(event){ if(bA < 0){ bA++; deplacer(bA); } event.preventDefault(); }); $("a#suiv").click(function(event){ if(bA > -(nbEnfants-1)){ bA--; deplacer(bA); } event.preventDefault(); }); }); </script> </body> </html> -------------------- L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
|
|
|
Nous sommes le : 28th March 2024 - 20:41 |