您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2018-12-02 13:32:56
  javascript

无间断滚动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.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 >读取</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.onmouseover=function() {clearInterval(MyMar)}
ami.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
下载地址:
Marquee(跑马灯)横向、无空白的不间断连续循环滚动代码
replace 方法---语法: location.replace(URL)
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。