Scrolling dynamique type googlevideos
niquedouille
-
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
j'aimerai utiliser sur mon site web un effet de scrolling de ce type :
http://video.google.com/videoplay?docid=-5485159977202184352
A savoir le fait de cliquer sur les flêches haut ou bas afin de faire défiler les vignettes par 5 (par exemple).
Sauriez-vous où je pourrai trouver des infos là dessus ? Je ne sais pas programmer en js, mais j'ai de bonnes notions pour comprendre les scripts. Toutefois, je ne sais pas dans quelle direction chercher.
Merci à tous les forumeurs !
jb
j'aimerai utiliser sur mon site web un effet de scrolling de ce type :
http://video.google.com/videoplay?docid=-5485159977202184352
A savoir le fait de cliquer sur les flêches haut ou bas afin de faire défiler les vignettes par 5 (par exemple).
Sauriez-vous où je pourrai trouver des infos là dessus ? Je ne sais pas programmer en js, mais j'ai de bonnes notions pour comprendre les scripts. Toutefois, je ne sais pas dans quelle direction chercher.
Merci à tous les forumeurs !
jb
Configuration: Windows XP Firefox 3.5.7
5 réponses
-
Tu peux utiliser le plugin scrollTo pour JQuery
http://demos.flesler.com/jquery/scrollTo/ -
-
Non, c'est gratuit.
-
bonjour,
effectivement, c'est gratuit :)
Bon cela fait 2 jours que j'essaye de le faire fonctionner, mais sans succès. La documentation n'est pas des plus claire, du moins pour moi. Je n'arrive pas à trouver d'explication claire, quelqu'un saurait-il m'aider ?
Page test : http://www.jbbourgeois.com/test.php
voici mon code (simplifié pour page de test) :
TEST.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="functions.js" type="text/javascript"></script>
<script type="text/javascript" src="include/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="include/jquery.scrollTo.js"></script>
<script type="text/javascript" src="include/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
function scroll(){
$('#conteneur').scrollTo( '+=150px' );
}
</script>
<style type="text/css">
<!--
#conteneur {
background-color: #09C;
height: 100px;
width: 70px;
}
-->a
</style>
</head>
<body><a href="#" onclick="scroll()" >clic to scroll</a>
<iframe id="conteneur" src="testiframe.php" scrolling="no" frameborder="0"></iframe>
</body>
</html>
TESTIFRAME.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
ul {
margin: 0px;
padding: 0px;
}
-->
</style>
</head>
<body>
<ul>
<li>ligne1</li>
<li>ligne2</li>
<li>ligne3</li>
<li>ligne4</li>
<li>ligne5</li>
<li>ligne6</li>
<li>ligne7</li>
<li>ligne8</li>
<li>ligne9</li>
<li>ligne10</li>
<li>ligne11</li>
<li>ligne12</li>
<li>ligne13</li>
<li>ligne14</li>
<li>ligne15</li>
<li>ligne16</li>
<li>ligne17</li>
<li>ligne18</li>
<li>ligne19</li>
<li>ligne20</li>
</ul>
</body>
</html>
Au passage, j'utilise une ifrmae parce que je n'ai pas réussit à le faire fonctionner dans une balise div.. -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
srollTo() est une méthode déjà dans Javascript sur certains objets.
Il faut donc l'appeler sur l'objet qui n'a pas cette méthode par défaut (sauf maintenant avec le plugin) : JQuery$.scrollTo( '#conteneur', 150);
