CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 18 15:40:56

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Effets

> LISTE UL DÉFILANTE UTILISANT SCRIPT.ACULO.US

LISTE UL DÉFILANTE UTILISANT SCRIPT.ACULO.US

Information sur la source

Note :

9,00 / 10

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é :3 197 / 313

Auteur : mikerob

Ecrire un message privé

Site perso

Commentaire sur cette source (10)

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

Les Membres Club peuvent 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

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx

MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

ACCESSIBARRE - AMÉLIORER LE CONFORT DES PERSONNES NON-VOYANT... par Pfuch

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

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.

Commentaire de etirex le 16/09/2009 18:01:52 9/10

Bonjour et merci pour cette magnifique source. J'aurais toutefois une question: comment fait-on pour ne plus avoir de pause à chaque mouvement d'un élément?

En fait j'aurais besoin d'une liste déroulante qui fonctionnerait en continue, sans pause et effet d'opacité.

Merci beaucoup

Commentaire de mikerob le 16/09/2009 18:15:47

Salut Etirex,

Ma source est seulement prévue pour effacer un élément à chaque fois. Si tu veux quelque chose en continu, je te propose de regarder le script de Chmel que j'ai déjà cité dans ma description ;) : http://www.javascriptfr.com/code.aspx?ID=25084.

Commentaire de etirex le 16/09/2009 22:39:35

Commentaire de etirex le 16/09/2009 22:43:12

oops, désolé pour le double message,

en fait j'ai d'abord testé le script de Chmel, mais il me pose 2 problèmes:

1- Quand on charge la page, la liste est d'abord vide, et le scroll commence, ce qui n'est pas très esthétique, par rapport à ton script qui démarre avec une liste pleine

2- Quand la liste arrive au bout, elle laisse un blanc derriere elle jusqu'a ce que la totalité des titres soient afficher pour ensuite recommencer, là encore c'est beaucoup mieux avec ton script qui lui, s'affiche réellement en continue

Donc soit je peux enlever la pause sur ton script, soit il faut que je reprenne celui de Chmel pour voir si je peux gommer ces 2 défauts...

Commentaire de etirex le 17/09/2009 09:11:48

Bon je viens de m'en sortir, j'ai pris des idées de ton script que j'ai transposé au script de Chmel, maintenant ça roule.

Merci encore

Commentaire de etirex le 17/09/2009 15:18:37

Je vous fais profiter de mes modifs, ça peut servir à d'autres:

<!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>
<title>Texte Defilant Vertical en Continue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">


</script>

<style type="text/css">
  div.flash {
    position : absolute;
    top : 50px;
    left : 200px;
    font-family: Arial, Tahoma, Helvetica, Sans-Serif;
    font-size: 1em;
    border: 1px solid #000000;
    width : 340px;
    height: 250px;
    padding-left : 10px;
    overflow: hidden;
  }

  #menu_deroulant {
    overflow: hidden;
    position: relative;
  }
  #menu_defile {
    position: relative;
    text-align:center;
  }

  #menu_defile ul {
    border:none;
    padding:0px;
    margin:0px;
  }
  #menu_defile ul li {
    padding:8px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width:100%;
    list-style:none;
    font-family:arial;
    font-size:1.2em;
   }

</style>
</head>

<body>

      <div class='flash'>
        <div id='menu_deroulant'>
          <div id='menu_defile'>
            <ul id="scroller1">
              <li>01. Lorem ipsum dolor sit amet</li>
              <li>02. Lorem ipsum dolor sit amet</li>
              <li>03. Lorem ipsum dolor sit amet</li>
              <li>04. Lorem ipsum dolor sit amet</li>
              <li>05. Lorem ipsum dolor sit amet</li>
              <li>06. Lorem ipsum dolor sit amet</li>
              <li>07. Lorem ipsum dolor sit amet</li>
              <li>08. Lorem ipsum dolor sit amet</li>
              <li>09. Lorem ipsum dolor sit amet</li>
              <li>10. Lorem ipsum dolor sit amet</li>
            </ul>
          </div>

        </div>
      </div>
</body>
</html>

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 si quelqu'un a un calendrier compatible en xhtml 1.0 strict se serait trop cool [ par ahl00 ] bonjour je suis a la recherche d'un calendrier compatible en xhtml 1.0 strict si quelqu'un en dispose de un de preference permanent se serai vachement

Nos sponsors

Derniers Blogs

[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril

CERTIFICATIONS BETA .NET 4 par KooKiz

[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo

LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE

[WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE par FREMYCOMPANY

Forum

LECTURE PROPRIéTé IMAGE SUR BOUTON PARCOURIR par dadbn

RE : EFFACER UNE LIGNE DANS FICHIER TEXTE EN PHP par ChasseurDeChimeres

RE : CHANGEMENT D' UNE IMAGE par ChasseurDeChimeres

RE : VERIFIER L'EXISTENCE D'UN NOM par ChasseurDeChimeres

VERIFIER L'EXISTENCE D'UN NOM par zyriuse

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT Travaux PAO iWork 09 arabe hebreu anglais captures ecran
Budget : 400€
creation site web Joomla
Budget : 4 000€
plateforme voyance rencontre boutique
Budget : 3 000€

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods