Specification
[1]
Syntax
<marquee behavior="scroll" direction="left" loop="-1" scrollamount="6" scrolldelay="85">Content...</marquee> <marquee behavior="slide" direction="right">Content...</marquee> <marquee behavior="alternate" direction="up">Content...</marquee> <marquee direction="down" scrolldelay="6" truespeed="1">Content...</marquee>
<style type="text/css"> #box { border: 2px solid red; height: 4em; overflow: hidden; position: relative; width: 450px; } </style>
<div id="box"> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul> <li></li> </ul> </div>
<script type="text/javascript"> function marquee() { var box = document.getElementById("box"), ol = box.getElementsByTagName("ol")[0], ul = box.getElementsByTagName("ul")[0]; ul.innerHTML = ol.innerHTML; if (ul.offsetTop - box.scrollTop <= 0) { box.scrollTop -= ol.offsetHeight; } else { box.scrollTop++; } } window.setInterval(marquee, 10); </script>
Example
Content...
Content...
Content...
Content...
1
2
3
4
5