向上滾動

<div id=”marquees”>
<a href=”#”>網頁設計一</a><br>
<br>
<a href=”#”>網頁設計二</a><br>
<br>
<a href=”#”>網頁設計三</a><br>
<br>
<a href=”#”>網頁設計四</a>
<br>
</div>
<script language=”javascript”>

marqueesheight=200;
stopscroll=false;

with(marquees){
style.width=0;
style.height=marqueesheight;
style.overflowx=”visible”;
style.overflowy=”hidden”;
nowrap=true;
onmouseover=new function(”stopscroll=true”);
onmouseout=new function(”stopscroll=false”);
}
document.write(’<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>’);

pretop=0; currenttop=0;

function init(){
templayer.innerhtml=””;
while(templayer.offsetheight<marqueesheight){
templayer.innerhtml+=marquees.innerhtml;
}
marquees.innerhtml=templayer.innerhtml+templayer.innerhtml;
setinterval(”scrollup()”,10);
}
document.body.onload=init;

function scrollup(){
if(stopscroll==true) return;
pretop=marquees.scrolltop;
marquees.scrolltop+=1;
if(pretop==marquees.scrolltop){
marquees.scrolltop=templayer.offsetheight-marqueesheight;
marquees.scrolltop+=1;
}
}
</script>

向下滾動

<div id=”marquees”> <a href=”#”>網頁設計一</a><br>
<br>
<a href=”#”>網頁設計二</a><br>
<br>
<a href=”#”>網頁設計三</a><br>
<br>
<a href=”#”>網頁設計四</a><br>
<br>
</div>
<script language=”javascript”>

marqueesheight=200;

with(marquees){
style.width=0;
style.height=marqueesheight;
style.overflowx=”visible”;
style.overflowy=”hidden”;
nowrap=true;
onmouseover=new function(”stopscroll=true”);
onmouseout=new function(”stopscroll=false”);
}
document.write(’<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>’);
pretop=0; currenttop=0;getlimit=0;stopscroll=false;

function init(){
templayer.innerhtml=””;
while(templayer.offsetheight<marqueesheight){
templayer.innerhtml+=marquees.innerhtml;
}
marquees.innerhtml+=templayer.innerhtml;
setinterval(”scrolldown()”,10);
}init();

function scrolldown(){
if(stopscroll==true) return;

pretop=marquees.scrolltop;
marquees.scrolltop-=1;
if(pretop==marquees.scrolltop){
if(!getlimit){
marquees.scrolltop=templayer.offsetheight*2;
getlimit=marquees.scrolltop;
}
marquees.scrolltop=getlimit-templayer.offsetheight+marqueesheight;
marquees.scrolltop-=1;
}
}
</script>

向左滾動

<div id=”marquees”>
<a href=”#”>網頁設計一</a>
<a href=”#”>網頁設計二</a>
<a href=”#”>網頁設計三</a>
<a href=”#”>網頁設計四</a>
</div>

<div id=”templayer” style=”position:absolute;left:0;top:0;visibility:hidden”></div>
<script language=”javascript”>

marqueeswidth=200;

with(marquees){
style.height=0;
style.width=marqueeswidth;
style.overflowx=”hidden”;
style.overflowy=”visible”;
nowrap=true;
onmouseover=new function(”stopscroll=true”);
onmouseout=new function(”stopscroll=false”);
}
preleft=0; currentleft=0; stopscroll=false;

function init(){
templayer.innerhtml=””;
while(templayer.offsetwidth<marqueeswidth){
templayer.innerhtml+=marquees.innerhtml;
}
marquees.innerhtml+=templayer.innerhtml;
setinterval(”scrollleft()”,10);
}init();

function scrollleft(){
if(stopscroll==true) return;
preleft=marquees.scrollleft;
marquees.scrollleft+=1;
if(preleft==marquees.scrollleft){
marquees.scrollleft=templayer.offsetwidth-marqueeswidth+1;
}
}
</script>

向右滾動

<div id=”marquees”>
<a href=”#”>網頁設計一</a>
<a href=”#”>網頁設計二</a>
<a href=”#”>網頁設計三</a>
<a href=”#”>網頁設計四</a>
</div>
<div id=”templayer” style=”position:absolute;left:0;top:0;visibility:hidden”></div>
<script language=”javascript”>

marqueeswidth=200;

with(marquees){
style.height=0;
style.width=marqueeswidth;
style.overflowx=”hidden”;
style.overflowy=”visible”;
nowrap=true;
onmouseover=new function(”stopscroll=true”);
onmouseout=new function(”stopscroll=false”);
}
pretop=0; currenttop=0; getlimit=0; stopscroll=false;

function init(){
templayer.innerhtml=””;
while(templayer.offsetwidth<marqueeswidth){
templayer.innerhtml+=marquees.innerhtml;
}
marquees.innerhtml+=templayer.innerhtml;
setinterval(”scrollright()”,10);
}init();

function scrollright(){
if(stopscroll==true) return;

preleft=marquees.scrollleft;
marquees.scrollleft-=1;
if(preleft==marquees.scrollleft){
if(!getlimit){
marquees.scrollleft=templayer.offsetwidth*2;
getlimit=marquees.scrollleft;
}
marquees.scrollleft=getlimit-templayer.offsetwidth+marqueeswidth;
marquees.scrollleft-=1;
}
}
</script>