javascript滚动文字

文字向上滚动效果,从网上找到,放到博上,作为笔记,感谢原作者

 

代码

< style  type ="text/css"   >
    li
{ color :  #006699 ; font-size : 12px ;  margin-top : 3px ;  margin-left : 0px }
    ul
{  padding-left : 0px ;  padding-top : 1px ;  margin-left : 20px }
</ style >

< div  id ="marquees"  style ="width:210px; margin-top:10px" >   <!--  这些是字幕的内容,你可以任意定义  -->
< ul >
< li  title ="文字1" > 文字1 </ li >
< li  title ="文字1"   > 文字2 </ li >
< li  title ="文字3"   > 文字3 </ li >
< li  title ="文字4" > 文字4 </ li >
< li  title ="文字5" > 文字5 </ li >
< li  title ="文字6" > 文字6 </ li >  
< li  title ="文字7" > 文字7 </ li >
< li  title ="文字8"   > 文字8 </ li >
< li  title ="文字9" > 文字9 </ li >
</ ul >

</ div >  
<!--  以下是javascript代码  -->
< script  language ="javascript" >
<!--
marqueesHeight
= 103 // 内容区高度
stopscroll = false // 这个变量控制是否停止滚动
with (marquees){
noWrap
= false // 这句表内容区不自动换行
style.width = 210 // 于是我们可以将它的宽度设为0,因为它会被撑大
style.height = marqueesHeight;
style.overflowY
= " hidden " // 滚动条不可见
onmouseover = new  Function( " stopscroll=true " );  // 鼠标经过,停止滚动
onmouseout = new  Function( " stopscroll=false " );  // 鼠标离开,开始滚动
}
// 这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write( ' <div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div> ' );
function  init(){  // 初始化滚动内容
//
多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while (templayer.offsetHeight < marqueesHeight){
templayer.innerHTML
+= marquees.innerHTML;
// 把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML = templayer.innerHTML + templayer.innerHTML;
// 设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval( " scrollUp() " , 100 );
}
document.body.onload
= init;
preTop
= 0 // 这个变量用于判断滚动条是否已经到了尽头
function  scrollUp(){  // 滚动条的驱动函数
if (stopscroll == true return // 如果变量"stopscroll"为真,则停止滚动 
preTop = marquees.scrollTop;  // 记录滚动前的滚动条位置
marquees.scrollTop += 1 // 滚动条向下移动一个像素
//
如果滚动条不动了,则向上滚动到和当前画面一样的位置
//
当然不仅如此,同样还要向下滚动一个像素(+1):
if (preTop == marquees.scrollTop){
marquees.scrollTop
= templayer.offsetHeight - marqueesHeight + 1 ;
}
}
-->
</ script >

 

 

你可能感兴趣的:(JavaScript)