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 / Exemple :
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">
<!--
/**
function Scroller(objName, speed) {
this.name = objName;
this.speed = speed;
this.initList();
this.setSpeed(this.speed);
}
/**
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 ^^
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.