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

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

记得前阵子有个朋友问我 无间断滚动
我也忘记了我当时在做什么了
随便上网拷了一段代码给他
实现是可以实现
但是太麻烦了
一大堆的代码
不静下心来是看不懂的 
趁着 今天有空
就来研究下 marquee 的终极用法
嘿嘿 ```

先看下 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()
up" 

>
阿米的眼泪<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.οnmοuseοver=function() {clearInterval(MyMar)}
ami.οnmοuseοut=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.οnmοuseοver=function() {clearInterval(MyMar)} //鼠标移过 停止执行
ami.οnmοuseοut=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 >读取</BUTTON>
<!-- 当字幕停止时，你可以设置水平字幕的 scrollLeft，或者设置垂直字幕的

scrollTop。 -->
<BUTTON >停止并设置

scrollTop=30</BUTTON>
<BUTTON >开始</BUTTON>
  提示：你可以先修改部分代码再运行

好的 接下来 同理可得
<div id=demo style=overflow:hidden;height:85 

>
<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"



>
<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.οnmοuseοver=function() {clearInterval(MyMar)}
ami.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>