Slide-in & slide-out Scroller Help!

[banyan]

I wanna have a scroller box in which spaced messages can slide in and
out. And only two messages are displayed withine the box at one time.
Something like a marquee, but the srolling starts when user click
somewhere, and the speed slows down to zero when one message completely
slides out of the box.

I have implemented the scrolling speed control part as below. But I
don't know how to implement the above-mentioned box where only two
messages appear inside. Appreciate it if you could help me with the
code as I am new to JS.

<script language="JavaScript">

var inc=10
var scrollwidth="249px"
str = 'onClick = KeyAction(window.event.keyCode)'

document.write(
'<div id="flyin1" style="position:absolute;width:' + scrollwidth +
';height:' + scrollheight + ';left:'+scrollwidth + ';"' + str + '>' +
message[0] + '</div>' +
'<div id="flyin2" style="position:absolute;width:' + scrollwidth +
';height:' + scrollheight + ';left:498px">' +
message[1] + '</div>' +
'<div id="flyin3" style="position:absolute;width:' + scrollwidth +
';height:' + scrollheight + ';left:747px">' +
message[2] + '</div>')

function animatein() {
if (parseInt(crossobj1.style.left) > 0) {
crossobj1.style.left = parseInt(crossobj1.style.left) - 30 + "px"
crossobj2.style.left = parseInt(crossobj2.style.left) - 30 + "px"
crossobj3.style.left = parseInt(crossobj3.style.left) - 30 + "px"
}
else {
crossobj1.style.left = "0px"
crossobj2.style.left = "249px"
crossobj3.style.left = "498px"
clearTimeout(start)
}
inc += 2
start = setTimeout("animatein()", inc)
}

function KeyAction(keyCode) {
crossobj1 = document.getElementById("flyin1")
crossobj2 = document.getElementById("flyin2")
crossobj3 = document.getElementById("flyin3")
animatein()
}

</script>

BTW, it seems DIV positioning uses px, and I would like to put the
scrolling box inside a table eventually. How can I make sure the
positioning is aligned with the % width of a table header.

Thanks in advance!