LISTE UL DÉFILANTE UTILISANT SCRIPT.ACULO.US Liste défilante, scriptaculous, Ajax-javascript, XHTML, Source N°48733 Javascript / Ajax / DHTML

Information sur la source

Catégorie :Effets Classé sous : Liste défilante, scriptaculous, Ajax-javascript, XHTML Niveau : Initié Date de création : 17/12/2008 Date de mise à jour : 17/12/2008 18:04:01 Vu / téléchargé: 2 292 / 255

Auteur : mikerob

Site perso

Ecrire un message privé

Note :
Aucune note

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Cela fait pas quelque temps que je cherche une liste défilante dont le contenu n'est pas fournit en javascript, mais est directement une liste (X)HTML. Il y avait bien le script de Chmel (pour rappel : http://www.javascriptfr.com/code.aspx?ID=25084) mais je voulais que les éléments de ma liste disparaisse élément par élément.

Donc finalement j'ai utilisé mes mains et mon cerveau (surtout mes mains...) pour faire une jolie liste déroulante avec des effects script.aculo.us.

Le version de script.aculo.us utilisée est la 1.8.1
Le script à été testé sur FireFox 3.0.5 et internet explorer 6.

Source

Voilà le code source pour ceux qui veulent pas downloader le zip.
Penser à ajouter les librairies scriptaculous 1.8.1
pour que sa fonctionne :)
<!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">
<html>
<head>
<title>Scroll List</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script type="text/javascript">
<!--
/**
* Constructor
*/
function Scroller(objName, speed) {
this.name = objName;
this.speed = speed;
this.initList();
this.setSpeed(this.speed);
}
/**
* Methods
*/
Scroller.prototype = {
name:"",
speed:0,
currPos:0,
totalHeight:'0px',
action:false,
/**
* Get all list elements and move them.
*/
scrollList : function () {
if(this.action) {
var list = $(this.name);
var listElements = $$('#' + list.id + ' li');
var h = listElements[this.currPos].offsetHeight;
for(var i=0; i<listElements.length; i++) {
var currE = listElements[i];
this.moveElement(currE,-h);
}
this.currPos ++;
if(this.currPos >= listElements.length) {
this.currPos = 0;
}
}
},
/**
* Move up an element if it's not the first. Else put it to the end of
* the list. .
*/
moveElement : function(element, step) {
var tempH = this.totalHeight; // create because afterFinish method can't
//used this.totalHeight ?!
if(element.style.top.split("px")[0] <= 0) {
new Effect.Opacity(element, { from: 1.0, to: 0, duration: 0.5,
afterFinish:function(){
element.style.top=tempH-element.offsetHeight+'px';
Effect.Appear(element, { duration: 0.5 });
}
});
} else {
new Effect.Move(element, { x: 0, y: step, mode: 'relative'});
}
},
/**
* init list elements positions.
*/
initList : function () {
var list = $(this.name);
var elements = $$('#' + list.id + ' li');
var pos = 0;
for(var i=0; i<elements.length; i++) {
elements[i].style.top = pos + 'px';
pos = pos + elements[i].offsetHeight;
}
this.totalHeight = pos;
},
/**
* Allow to adjust the scrolling speed
* speed : speed in milliseconds
*/
setSpeed : function(speed) {
setInterval(this.name + '.scrollList()',speed);
},
/**
* Allow to start the list scrolling
*/
startScrolling : function (){
this.action = true;
},
/**
* Allow to stop the list scrolling
*/
stopScrolling : function() {
this.action = false;
}
}
// Hack to draw a correct list when Javascript is disabled
document.documentElement.className+=" hasJS";
-->
</script>
<style type="text/css">
ul.scroller {
border:none;
padding:0px;
margin:0px;
}
ul.scroller li {
padding:10px 0px 0px 15px;
margin: 0px 0px 0px 5px;
width:100%;
list-style:none;
background : url('./liststyle.gif') no-repeat left 10px;
font-family:arial;
font-size:11px;
}
.hasJS ul.scroller {
position:relative;
border:1px solid black;
overflow:hidden;
padding:0px;
margin:0px;
}
.hasJS ul.scroller li {
position:absolute;
left:0px;
padding:10px 0px 0px 15px;
margin: 0px 0px 0px 5px;
width:90%;
list-style:none;
background : url('./liststyle.gif') no-repeat left 10px;
font-family:arial;
font-size:11px;
}
#scroller1 {position:absolute; left:0px; top:10px; width:340px; height:300px;}
#scroller2 {position:absolute; left:400px; top:10px; width:250px; height:400px;}
#scroller3 {position:absolute; left:710px; top:10px; width:400px; height:200px;}
</style>
</head>
<body>
<ul id="scroller1" class="scroller">
<li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. </li>
<li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
</ul>
<ul id="scroller2" class="scroller">
<li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
</ul>
<ul id="scroller3" class="scroller">
<li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
</ul>
<script type="text/javascript">
var scroller1 = new Scroller('scroller1',4000);
var scroller2 = new Scroller('scroller2',2000);
var scroller3 = new Scroller('scroller3',1500);
// start all list scrolling
scroller1.startScrolling();
scroller2.startScrolling();
scroller3.startScrolling();
</script>
</body>
</html>

Voilà le code source pour ceux qui veulent pas downloader le zip. 
Penser à ajouter les librairies scriptaculous 1.8.1 
pour que sa fonctionne :)

<!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">
<html>
<head>
  <title>Scroll List</title>

  <script src="lib/prototype.js" type="text/javascript"></script>
  <script src="lib/scriptaculous.js?load=effects" type="text/javascript"></script>

  <script type="text/javascript">
  <!--
    /**
     * Constructor
     */         
    function Scroller(objName, speed) {    
      this.name = objName;
      this.speed = speed;
      this.initList();
      this.setSpeed(this.speed);
    }
    
    /**
     * Methods
     */
    Scroller.prototype = {
      name:"",
      speed:0,
      currPos:0,
      totalHeight:'0px',
      action:false,
      
      /**
       * Get all list elements and move them.
       */             
      scrollList : function () {
        if(this.action) {     
          var list = $(this.name); 
          var listElements = $$('#' + list.id + ' li'); 
          var h = listElements[this.currPos].offsetHeight;
          for(var i=0; i<listElements.length; i++) {
            var currE = listElements[i];      
            this.moveElement(currE,-h);
          }
          this.currPos ++;
          if(this.currPos >= listElements.length) {
            this.currPos = 0;
          }
        }
      },
      
      /**
       * Move up an element if it's not the first. Else put it to the end of 
       * the list.       .
       */             
      moveElement : function(element, step) {
        var tempH = this.totalHeight; // create because afterFinish method can't 
                                      //used this.totalHeight ?!
        if(element.style.top.split("px")[0] <= 0) {
         new Effect.Opacity(element, { from: 1.0, to: 0, duration: 0.5, 
           afterFinish:function(){
              element.style.top=tempH-element.offsetHeight+'px';
              Effect.Appear(element, { duration: 0.5 });
           }
         });
        } else {   
           new Effect.Move(element, { x: 0, y: step, mode: 'relative'});
        }
      },
    
      /**
       * init list elements positions.
       */             
      initList : function () {
        var list = $(this.name);
        var elements = $$('#' + list.id + ' li');
        
        var pos = 0;
        for(var i=0; i<elements.length; i++) {
          elements[i].style.top = pos + 'px'; 
          pos = pos + elements[i].offsetHeight;
        }
        this.totalHeight = pos;
      },
      
      /**
       * Allow to adjust the scrolling speed
       *  speed : speed in milliseconds
       */             
      setSpeed : function(speed) {
        setInterval(this.name + '.scrollList()',speed);
      },
      
      /**
       * Allow to start the list scrolling
       */             
      startScrolling : function (){
        this.action = true;
      },
      
      /**
       * Allow to stop the list scrolling
       */
      stopScrolling : function() {
        this.action = false;
      } 
    }
    
    // Hack to draw a correct list when Javascript is disabled
    document.documentElement.className+=" hasJS";
  -->  
  </script>

  <style type="text/css">    
  
    ul.scroller {
      border:none;
      padding:0px;
      margin:0px;
    }

    ul.scroller li {   
      padding:10px 0px 0px 15px;
      margin: 0px 0px 0px 5px;
      width:100%;
      list-style:none;
      background : url('./liststyle.gif') no-repeat left 10px;
      font-family:arial;
      font-size:11px;
    }
    
    
    .hasJS ul.scroller {
      position:relative;
      border:1px solid black;
      overflow:hidden;
      padding:0px;
      margin:0px;
    }
    
    .hasJS ul.scroller li {   
      position:absolute;
      left:0px;
      padding:10px 0px 0px 15px;
      margin: 0px 0px 0px 5px;
      width:90%;
      list-style:none;
      background : url('./liststyle.gif') no-repeat left 10px;
      font-family:arial;
      font-size:11px;
    }
    
    #scroller1 {position:absolute; left:0px;   top:10px; width:340px; height:300px;}
    #scroller2 {position:absolute; left:400px; top:10px; width:250px; height:400px;}
    #scroller3 {position:absolute; left:710px; top:10px; width:400px; height:200px;}
   
  </style>
</head>
<body>
    <ul id="scroller1" class="scroller">
      <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. </li>
      <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>     
    </ul>
    
    <ul id="scroller2" class="scroller">
      <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
    </ul>

    <ul id="scroller3" class="scroller">
      <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
    </ul>
    <script type="text/javascript">
    
      var scroller1 = new Scroller('scroller1',4000);
      var scroller2 = new Scroller('scroller2',2000);
      var scroller3 = new Scroller('scroller3',1500);
      
      // start all list scrolling
      scroller1.startScrolling();
      scroller2.startScrolling();
      scroller3.startScrolling();      
    </script>  
</body>
</html>

Conclusion

Voilà, tout commentaire est le bienvenu. Je suis pas un programmeur Javascript donc n'hésitez pas à me signaler les fautes que je ferais ^^

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

ScrollingList
- lib
  - effects.js 38 986 octets
  - prototype.js 124 000 octets
  - scriptaculous.js 2 654 octets
- index.html 15 243 octets
- liststyle.gif 825 octets

Télécharger le zip

Historique

17 décembre 2008 18:04:01 :: Mise en page code

Sources de la même categorie

RAINBOW CURSOR par wackybacky

DIAPO MULTIPLES EN FONDU par kazma

DÉGRADÉ DE TEXTE par XelectroX

DRAG DROP DE VIDEOS par kazma

DEFILEMENT OU SCROLL HORIZONTAL AUTREMENT FAIT AUTOMATIQUE E... par abdelaziz_info

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

LOADER UNE PAGE EN AJAX AVEC UN PETIT EFFET par Annadrill

EXPLORATEUR WEB par XtremDuke

PERSONNALISER LES BOÎTES DE DIALOGUE par XtremDuke

PERSONNALISER SES SELECT par XtremDuke

PLUGIN BDDR, À INTÉGRER DANS VOS PAGES WEB, PERMET UNE UTILI... par odinh

Commentaires et avis

Commentaire de Kimjoa le 18/12/2008 19:42:36

salut, l'effet est sympas, mais j'ai quelque remarque concernant le code.

-met la valeur relative pour la position dans le css.
-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action.
-tu aurais du faire 2 variable locale this.listElements et this.liste, au lieu de les répété a chaque intervalle.
-tu appels t'as fonction locale setSpeed,avec un argument locale... pas besoin passe par un this (this.speed)
-utilise un binding pour lancer ton intervalle, de plus le nom de l'objet js doit etre le meme que l'id de la liste HTML, c 'est pas logique,... utilse ce bout de code a la place setInterval(this.scrollList.bind(this),this.speed);
-tu utilsie une classe css, hasJS pour documentElement, tu arrais du juste pour te liste lors de leur création.

code a revoir... j'espere avoir été constructif a+

Commentaire de mikerob le 19/12/2008 10:35:12

Salut Kimjoa,

Merci pour le commentaire. Oui je ocnfirme il est constructif, mais je suis pas sur de tout comprendre :

"-met la valeur relative pour la position dans le css " -> Tu parle de quel élément ?

"-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action." -> Si j'enlève le this.action du coup je peux plus stopper la liste au passage de la souris... Je pourrais faire de manière à se que le startScrolling change le setInterval, mais j'ai eu pas mal de bug en le changeant à la volée...

"-tu aurais du faire 2 variable locale this.listElements et this.liste..." -> yes relicat de test, sa sera changé ^^

"-tu appels t'as fonction locale setSpeed" -> c'est pour permettre éventuellement de changer la vitesse depuis "l'extérieur" et non pas dans l'objet js (méthode public).

D'ailleurs question en passant : en JS il n'y a pas vraiment de notion d'objet privé/public non ?

"-utilise un binding pour lancer ton intervalle" -> je connais pas cette notion mais à froid sa me plait bien. Je test et je l'implémenterais dans la pochaine version :)

Pour le hasJS, c'est une astuce global qui n'a pas d'impacte sur le fonctionnement du code, hormis le fait que la page s'affiche comme il faut si le JS est désactivé ^^ (astuce que l'on m'a donné ici : http://forum.alsacreations.com/topic-5-34711-1-resolu-CSS-specifique-JavaScript-active.html)

Voilà, je revois ma copie pour la prochaine version mais si tu as d'autres remarque n'hésite pas.

Commentaire de Kimjoa le 19/12/2008 21:52:49

re mikerob!

- pour le absolute du css, oublie ... ;),
-pour l'appel de l'intervalle. En js les intervalle consomme bcp de mémoire,que ton scroll soit stoppé ou en marche ton intervalle fonctionne tjrs ...
-pour la class css hasJS, celle ci s'applique pour toute les liste du document, il fallais juste l'appliqué pour chaque instance de t'as classe.
-en ce qui concerne les variable privé , public, js ne permet pas vraiment de faire de sécurité , met on peux le simuler , dans certain cas , voici un tuto tres bien fait en 3 partie http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/
-concernant le binding, quand tu passe une fonction comme argument a une autre fonction, celle-ci pert son context... le js possede 2 fonction native, call et apply ki permet d'appeller une fonction avec un cointext précis, tres utile pour faire de l'héritage... avec le lien ci dessus tu decrait comprende de suite.

je te file le code que j'ai modifierr
pour le css de hasJS, pas grans chose de changé...

.scroller.hasJS{
      position:relative;
      border:1px solid black;
      overflow:hidden;
      padding:0px;
      margin:0px;
    }

    .scroller.hasJS li {
      position:absolute;
      left:0px;
      padding:10px 0px 0px 15px;
      margin: 0px 0px 0px 5px;
      width:90%;
      list-style:none;
      font-family:arial;
      font-size:11px;
    }

pour le code js

function Scroller(list, speed) {
       this.speed=speed;
       this.list= $(list);
       this.list.className+=" hasJS";
       this.listElements = $$('#' + this.list.id + ' li');
       this.listLength=this.listElements.length;
       this.totalHeight = 0;
       for(var i=0; i<this.listLength; i++) {
         this.listElements[i].style.top = this.totalHeight + 'px';
         this.totalHeight = this.totalHeight +  this.listElements[i].offsetHeight;
       }
       Event.observe(this.list,'mouseover',this.onMouseOver.bindAsEventListener(this));
       Event.observe(this.list,'mouseout',this.onMouseOut.bindAsEventListener(this));
    }

    Scroller.prototype = {
      speed:0,
      currPos:-1,
      totalHeight:'0px',
      scrollList : function () {
        this.currPos++;
        for(var i=0; i<this.listLength; i++) {
           if(this.currPos==i) {
              new Effect.Opacity(this.listElements[i], { from: 1.0, to: 0, duration: 0.5,
                 afterFinish:function(element){
                    element.style.top=this.totalHeight-element.offsetHeight+'px';
                    if(Prototype.Browser.IE){
                       element.style.filter="alpha(opacity=100)";
                    }else{
                       element.style.opacity=1;
                    }
                 }.bind(this,this.listElements[i])
              });
              if(i==this.listLength-1)
                this.currPos=-1;
           }else{
              new Effect.Move(this.listElements[i], { x: 0, y: -this.listElements[this.currPos].offsetHeight, mode: 'relative'});
           }
        }
      },
      startScrolling : function (speed){
        if(speed)
           this.speed = speed;
        this.interval=setInterval(this.scrollList.bind(this),this.speed);
      },
      stopScrolling : function() {
         clearInterval(this.interval);
      },
      onMouseOver : function(e){
         this.stopScrolling();
      },
      onMouseOut : function(e){
         this.startScrolling();
      }
    }

note - j'utilse bindAsEventListener au lieux d'un simple bind dans le callback (ou handler) de ma fonction, cela permet de faire passé en 1er argument l'objet event...

je t'explique pas tout , je connais pas ton niveau , alors si t'as des questions hésite pas bye.

Commentaire de mikerob le 05/01/2009 12:03:57

Salut Kimjoa,

Bon, vu que les vacances de Noël sont finite :( j'ai enfin pris le temps de regarder tes modifications. En deux mots : Très intéressant !

je ne connaissais pas dutout la fonction clearInterval, se qui fait que du cou, j'ai plein d'autre code source à modifier pour améliorer les performances ^^'

Par contre tu utilise un element.style.filter ou element.style.opacity à la place du Effect.Appear, c'est pour améliorer les perfs ?

Sinon dans l'ensemble, je comprend bien ton code, sauf le .bind(this,this.listElements[i]) après le afterEffect. Mais je suppose que je le comprendrais quand j'aurais lu l'article que tu m'as passé sur les objet javascript.

Par contre je reste sur ma position pour le .hasJS en global, car le but est effectivement de modifier toutes les listes (et j'irai même plus loin, tous les éléments de ma page).

J'appliquerait tes modifs sur ma source dès que j'aurai 5 minutes :)

Merci encode pour tes précieux conseil.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

[XHTML & XML] Peut-on créer ses propres balises ? [ par mentral ] Bonjour à tous.En premier lieu, j'aimerai développer un petit "composant" (le terme n'est sans doute pas approprié) en javascript perme Expressions régulières [ par koalyptus ] Bonjour, n'étant pas très à l'aise avec les RegExp je voudrais savoir comment faire pour trouver une occurrence exacte d'un mot dans une chaîne. Je m Script Dernier message forum dans du xhtml 1.0 Strict [ par animusaquila ] Bonjour à tous,J'ai créé un site web (lien sur mon profil) contenant un forum phpbb3. J'aimerais en fait, créé un script en Java pour afficher les 5 d Scrolling horizontal & Scriptaculous [ par alexismessaoudi ] Bonjour,Je souhaiterais, pour mon site web, obtenir un scrolling horizontal de même type que celui du site Gucci voirGrâce à la librai Preload d'image et scriptaculous [ par Annadrill ] Bonjour,je cherche à faire un préload qui se déroulerais comme ceci,1. on arrive sur la page qui s'affiche et une div "chargement..." s'affiche avec u js, xhtml, j'ai besoin d'aide pour xul [ par parayes ] Bonjour, Bonsoirje regarde parsi par la et découvre petit a petit le xulje suis sous firefox 3et je voudrais créer un tout petit add-on tout simple po