All the examples on this page will assume you have the following line included either in your html head or in the body, before you use it.
<script type="text/javascript" src="marquee.min.js"></script>
The simplest way to roll some content.
<script type="text/javascript">
<!--
window.onload = function()
{
var marquee1 = new Marquee({id:"marquee1"}).init();
};
// -->
</script>
<div id="marquee1" style="white-space:nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
In this example you see how to use Marquee with element and how can you change the direction, the speed and make it not stopping on mouseover.
<script type="text/javascript">
<!--
window.onload = function()
{
var marquee2 = new Marquee({el:document.getElementById("marquee2"),dir:"right",wait:100,mouseStops:false});
marquee2.init();
};
// -->
</script>
<div id="marquee2" class="horizontal" style="direction:rtl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
It's easy to scroll up or down.
<script type="text/javascript">
<!--
window.onload = function()
{
var marquee_up = new Marquee({id:"marquee_up",dir:"up"}).init();
var marquee_down = new Marquee({id:"marquee_down",dir:"down"}).init();
};
// -->
</script>
<div id="marquee_up" style="width:300px;height:100px;float:left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="marquee_down" style="width:300px;height:100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>