JS – CSS – Scroller javascript

Un semplicissimo script javascript per la creazione di uno scroller, usatissimo per le news e per gli eventi.

Al passaggio del mouse lo scroll si ferma, per poi riprendere quando il mouse è fuori dall’area del DIV.

<script language="javascript">

function scrollUp(box,scrollY){

var boxTmpOuter = document.getElementById(box + "Outer");
var boxTmp = document.getElementById(box);
var top = boxTmp.style.top.replace(/px/,"");
var h = boxTmp.offsetHeight;
var hOuter = boxTmpOuter.offsetHeight;

//se il contenitore è più grande del contenuto non scrollo, non serve!
if (h > hOuter){

top = top.valueOf() – scrollY;
if (top < -h) top = h – 20;
boxTmp.style.top = top + "px"

}

}
function scrollNews(){

actionId = setInterval("scrollUp(‘news’,1)",25);

}
function scrollNewsStop(){

clearInterval(actionId);
}

//start
document.onLoad = scrollNews();

</script>
<div style="overflow:hidden;height:100px;width:200px;" id="newsOuter">

<div id="news" style="position:relative;top:0px;height:auto;" onMouseOver="scrollNewsStop();" onMouseOut="scrollNews();">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio

</div>

</div>

Attenzione. News (div) deve avere lo style position settato su relative, altrimenti il contenuto trasborda.

Semplice vero? Funziona sia su IE, sia su Firefox.