无间断滚动marquee的详细用法解析

< html >
< head >
< style type = " text/css " >
<!--
.test  {
    font-size: 12px;
    line-height: normal;
    text-decoration: none;
}
-->
</ style >
< head >
< body >
< div id = " layer1 "  style = " overflow-y:hidden;width:50; " >
     < div id = " layer2 " >
< table width = " 130 "  height = " 70 "  border = " 0 "  align = " center "  cellpadding = " 0 "  cellspacing = " 0 "  class = " test " >
               < tr >
                 < td width = " 150 "  height = " 70 "  valign = " top "  bgcolor = " #FFFFFF "  class = " nav1style style46 " >
< center > 第( 1 )条 </ center >
< a href = " aspfile/show_article.asp?id=3038 "  title = " 关于＜＜电气工程自动化＞＞研究生班授课的通知 "  class = " none_underline "  target = " _blank " >< font color = #ff0000 > 关于＜＜电气工程自动化＞＞研究生班授课的通知 & nbsp; 2006 - 3 - 9 </ font ></ a >< br >< br >

< center > 第( 2 )条 </ center >
< a href = " aspfile/show_article.asp?id=3036 "  title = " 关于企业管理研究生班授课的通知 "  class = " none_underline "  target = " _blank " >< font color = #ff0000 > 关于企业管理研究生班授课的通知 & nbsp; 2006 - 3 - 8 </ font ></ a >< br >< br >
</ td >
               </ tr >
       </ table >
     </ div >
     < div id = " layer3 " >
     </ div >
</ div >
< script language = " javascript " >
     var  layerHeight  =   100 ;  //  定义滚动区域的高度.
     var  iFrame  =   1 ;  //  定义每帧移动的象素.
     var  iFrequency  =   50 ;  //  定义帧频率.
     var  timer;  //  定义时间句柄.
     if (document.getElementById( " layer2 " ).offsetHeight  >=  layerHeight)
        document.getElementById( " layer1 " ).style.height  =  layerHeight;
     else
        document.getElementById( " layer1 " ).style.height  =  document.getElementById( " layer2 " ).offsetHeight;
    document.getElementById( " layer3 " ).innerHTML  =  document.getElementById( " layer2 " ).innerHTML;
     function  move() {
        if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight)
            document.getElementById("layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame)
        else
            document.getElementById("layer1").scrollTop += iFrame
    }
    timer  =  setInterval( " move() " ,iFrequency);
    document.getElementById( " layer1 " ).onmouseover = function ()  {clearInterval(timer);}
    document.getElementById( " layer1 " ).onmouseout = function ()  {timer=setInterval("move()",iFrequency);}
</ script >
</ body >
</ html >

在网上找了点关于文字滚动方面的JS，想必以后会用，先收藏了！！
先看下 marquee 的html 属性
<MARQUEE ALIGN="…"     
　　BEHAVIOR="…"  
　　BGCOLOR="…"  
　　DIRECTION="…"  
　　HEIGHT="…"  
　　WIDTH="…"  
　　HSPACE="…"  
　　VSPACE="…"  
　　LOOP="…"  
　　SCROLLAMOUNT="…"  
　　SCROLLDELAY="…"  
　　>…  
　　</MARQUEE> 
align: --对其方式 LEFT，CENTER，RIGHT，TOP，BOTTOM (不用多说咯)
Behavior：--用于设定滚动的方式，主要由三种方式：
         behavior="scroll"--表示由一端滚动到另一端；
         behavior="slide":--表示由一端快速滑动到另一端，且不再重复；
         behavior="alternate" 默认值  --表示在两端之间来回滚动。
      看下例子把:

            < marquee behavior = " scroll " > behavior = " scroll " 表示由一端滚动到另一端； </ marquee >
            < marquee behavior = " slide " > behavior = " slide " :表示由一端快速滑动到另一端，且不再重复；； </ marquee >
            < marquee behavior = " alternate " > behavior = " alternate " 表示在两端之间来回滚动。 </ marquee >  
         

direction:--left(默认值) 左; right 右;up 上;down 下;
bgcolor--背景颜色
height--高度
weight--宽度
Hspace和vspace--分别用于设定滚动字幕的左右边框和上下边框的宽度。 作用大概和 css中的 margin 差不多`
scrollamount--用于设定每个连续滚动文本后面的间隔，该间隔用像素表示,
              以上是官方说法,其实就是滚动的速度,
              值不能太大,要不从视觉角度来说,是没反映的
              值越大速度越快 反之越慢咯 ```
scrolldelay--延迟时间
loop--这个属性大家也很熟悉把,循环次数; loop=-1的时候 一直重复循环 默认值

         < marquee scrollamount = " 15 " > scrollamount = " 15 "  15的时候 就很快了  </ marquee >
        < marquee scrollamount = " 5 " > scrollamount = " 5 "    </ marquee >
        < marquee scrollamount = " 5 "  direction = " up " > scrollamount = " 5 " direction = " up "   </ marquee >
        < marquee scrollamount = " 3 "  direction = " right " > scrollamount = " 3 " direction = " right "   </ marquee >
        < marquee scrollamount = " 3 "  direction = " left "  loop = " 10 " > scrollamount = " 3 "  direction = " left "  loop = " 10 "   </ marquee >
       

好 现在我们再来接触一些 Dcode 的一些知识
首先是两个鼠标事件
onmouseover 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout  鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()
onmouseover="this.stop();" onmouseout="this.start
意思就是 鼠标移到marquee的内容上的时候 停止循环
鼠标移开 marquee 又开始移动

< marquee direction = " up "  onmouseover = " this.stop(); "  onmouseout = " this.start(); " >
阿米的眼泪 < br >
眼泪的阿米 < br >
amily < br >
</ marquee >

继续
innercode--设置或获取位于对象起始和结束标签内的 code
innerText--设置或获取位于对象起始和结束标签内的文本
scrollLeft-- 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop --设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
         PS:呵呵 大家不要和我以前一样想当然的还以为有scrollRigh和scrollDown
scrollDelay-- 设置或获取字幕滚动的速度
              要创建垂直滚动的字幕，请将其 scrollLeft 属性设定为 0。
              要创建水平滚动的字幕，请将其 scrollTop 属性设定为 0，这将覆盖任何脚本设置
scrollHeight-- 获取对象的滚动高度
scrollAmount--设置或获取介于每个字幕绘制序列之间的文本滚动像素数
offsetTop--获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetLeft--获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetHeight--获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
clearInterval 使用 setInterval 方法取消先前开始的间隔事件。

好 现在我们先看看 我佛山人(前辈呀)的一段程序

< div id = ami style = overflow:hidden;height: 50 ;width: 150 >  
     < div id = ami1 >
我是打头的 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动
     </ div >
     < div id = ami2 ></ div >
</ div >
< script >
var  speed = 30 ;
ami2.innercode = ami1.innercode
function  Marquee()
{
    if(ami2.offsetTop-ami.scrollTop<=0)
        ami.scrollTop-=ami1.offsetHeight;
    else
        ami.scrollTop++;
}
var  MyMar = setInterval(Marquee,speed)
ami.onmouseover = function ()  {clearInterval(MyMar)}
ami.onmouseout = function ()  {MyMar=setInterval(Marquee,speed)}
</ script >

好 上面的就是不间断滚动了
小子无才
只好翻译下 这段代码

<script>
var speed=30;   //设变量 滚动速度变量speed =30                  
ami2.innercode=ami1.innercode //复制ami1的code代码给ami2
function Marquee()
{
        if(ami2.offsetTop-ami.scrollTop<=0) //如果ami2.offset-ami.scrolltop<=0(也就是ami1的内容滚动结束)则ami2开始滚动
                ami.scrollTop-=ami1.offsetHeight; //ami.scrolltop此时的值为ami2滚动的长度
        else
                ami.scrollTop++;//否则ami1继续滚动咯
}
var MyMar=setInterval(Marquee,speed)//每隔30毫秒 执行一次
ami.onmouseover=function() {clearInterval(MyMar)} //鼠标移过 停止执行
ami.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//滑出 继续执行
</script>
大家不理解的话
看这个例子

 
< MARQUEE id = m1 direction = up style = " border-width:2px;border-style:solid; "
width = 200  height = 200 > 向上 </ MARQUEE >< BR >
<!--  单击此按钮可在字幕滚动时读取 scrollLeft 和 scrollTop 属性的值。  -->
< BUTTON onclick = " alert('scrolltop: ' + m1.scrollTop + ' scrollLeft: ' + m1.scrollLeft) " > 读取 </ BUTTON >
<!--  当字幕停止时，你可以设置水平字幕的 scrollLeft，或者设置垂直字幕的 scrollTop。  -->
< BUTTON onclick = " m1.stop();m1.scrollTop = 100; " > 停止并设置 scrollTop = 30 </ BUTTON >
< BUTTON onclick = " m1.start(); " > 开始 </ BUTTON >

好的 接下来 同理可得

< div id = demo style = overflow:hidden;height: 85  onmouseover = " ii=1 "  onmouseout = " ii=0 "   >
< div id = demo1 >
我是打头的 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动
</ div >
< div id = demo2 ></ div >

  < script >
var  ii = 0 ;t = demo.scrollTop
demo2.innercode = demo1.innercode
function  qswhMarquee() {
if (ii==1)return
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
setInterval(qswhMarquee, 60 )
</ script ></ div >

再同理......嘿嘿

  < div style = " width:200px;height:150px;overflow:hidden "  onmouseover = " try{clearTimeout(timer1)}catch(e){;} "  onmouseout = " timer1=setInterval('newsScroll()',10) " >
< table cellspacing = 0  cellpadding = 5  bgcolor = #F8F8F8 style = " position:relative;top:0px;width:200px;table-layout:fixed "  id = news >
   < tbody >
   < tr >
     < td valign = top height = 150 >
       < b > 新闻一 </ b >< br >
  我是打头的 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动
     </ td >
   </ tr >
   < tr >
     < td valign = top height = 150 >
       < b > 新闻二 </ b >< br >
    我是打头的 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
     </ td >
   </ tr >
   < tr >
     < td valign = top height = 150 >
       < b > 新闻三 </ b >< br >
     我是打头的 < br >
我向上运动 < br >
我向上运动 < br >
     </ td >
   </ tr >
   </ tbody >
   < script language = javascript >
     // 重复一次新闻内容
    document.write(news.tBodies[ 0 ].innercode)
   </ script >
</ table >
</ div >

< script language = javascript >
   // 实现不间断滚动
   function  newsScroll()
   {
    news.style.pixelTop=(news.style.pixelTop-1)%(news.clientHeight/2);
  }
  timer1 = setInterval('newsScroll()', 10 )   // 更改第二个参数可以改变速度，值越小，速度越快。
</ script >

以上都是 向上无间断的
接着给出向下的`````

 

< div id = ami style = overflow:hidden;height: 50 ;width: 150 >  
     < div id = ami1 >
我是打头的 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动 < br >
我向上运动
     </ div >
     < div id = ami2 ></ div >
</ div >

< script >
var  speed = 30
ami2.innercode = ami1.innercode
ami.scrollTop = ami.scrollHeight
function  Marquee() {
if(ami1.offsetTop-ami.scrollTop>=0)
ami.scrollTop+=ami2.offsetHeight
else{
ami.scrollTop--
}
}
var  MyMar = setInterval(Marquee,speed)
ami.onmouseover = function ()  {clearInterval(MyMar)}
ami.onmouseout = function ()  {MyMar=setInterval(Marquee,speed)}
</ script >

最后整理