Prototype插件之无限循环滚动新闻

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1" >
< script  type ="text/javascript"  src ="prototype.js" ></ script >
< title > Prototype.js news scroller </ title >
</ head >
< body >
< style > ...
h1 {...}{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14pt;
    color:#000000
}
h2 {...}{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12pt;
    color:#000000
}
body {...}{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10pt;
    color:#000000
}
.highlights {...}{
    width:400px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#49176e;
    background-color:#ffffff;
    overflow-x:hidden;
    overflow:hidden;
    margin:0px;
    border:1px solid #000000;
}    
</ style >
< h1 > Prototype.js news scroller </ h1 >
< h2 > by James MacFarlane </ h2 >
Wraps automaticaly. Stops on mouseover. View source to grab the example.



< div  style ="height:250px"  onmouseover ='stopScroll=1'  onmouseout ='stopScroll=0;scrollMe()'  id ="highlights"  class ="highlights" >
&bull;&nbsp; start < br  />
&bull;&nbsp; Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
< br  /> &bull;&nbsp; Suspendisse at felis.
< br  /> &bull;&nbsp; Etiam ullamcorper.
< br  /> &bull;&nbsp; Aenean fringilla, eros eu dapibus tristique, erat lacus vestibulum metus, nec pharetra leo ante et quam.
< br  /> &bull;&nbsp; Nunc ac mi molestie justo placerat laoreet.
< br  /> &bull;&nbsp; Morbi eget dolor.
< br  /> &bull;&nbsp; Curabitur pretium, mi quis iaculis molestie, dolor ligula sagittis orci, at sodales quam dolor quis sem. Suspendisse vitae risus.
< br  /> &bull;&nbsp; Maecenas vestibulum dolor vel augue.
< br  /> &bull;&nbsp; Sed purus. Ut nisi massa, vestibulum id, lobortis eget, aliquet eu, enim.
< br  /> &bull;&nbsp; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
< br  /> &bull;&nbsp; Suspendisse scelerisque dui.
< br  /> &bull;&nbsp; Donec viverra, nisl eget fringilla rutrum,
< br  /> &bull;&nbsp; lorem odio nonummy enim, quis pellentesque mauris ante et diam.
< br  /> &bull;&nbsp; Suspendisse potenti. Donec aliquet.
< br  /> &bull;&nbsp; Maecenas accumsan mattis nibh.
< br  /> &bull;&nbsp; end < br  />
</ div >


< script  language =javascript > ...
//var boxHeight = $('highlights').style.height.replace('px','')
var repeatHeight = $('highlights').scrollHeight //get the current height so we know when to wrap
$('highlights').innerHTML = $('highlights').innerHTML + $('highlights').innerHTML  //add a second copy so we can scroll down to the wrap point
var stopScroll = 0
var x
function scrollMe() ...{
    clearTimeout(x)
    if(stopScroll==1) ...{
        return
    }
    $('highlights').scrollTop=$('highlights').scrollTop+1
    if($('highlights').scrollTop<=repeatHeight) ...{
        // keep on scrolin' 
        x = setTimeout("scrollMe()",40)
    }
    else ...{ //we have hit the wrap point
        $('highlights').scrollTop=0
        x = setTimeout("scrollMe()",40)
    }
}
x = setTimeout("scrollMe()",1000)
// start scrolling after one second
</ script >


</ body >
</ html >