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

本文详细介绍了如何使用HTML和JavaScript实现文字滚动效果,包括不同方向的滚动、速度控制及鼠标交互等,适合初学者实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

None.gif<html>
None.gif
<head>
None.gif
<style type="text/css">
None.gif
<!--
ExpandedBlockStart.gifContractedBlock.gif.test 
dot.gif{
InBlock.gif    font
-size: 12px;
InBlock.gif    line
-height: normal;
InBlock.gif    text
-decoration: none;
ExpandedBlockEnd.gif}

None.gif
-->
None.gif
</style>
None.gif
<head>
None.gif
<body>
None.gif
<div id="layer1" style="overflow-y:hidden;width:50;">
None.gif    
<div id="layer2">
None.gif
<table width="130" height="70" border="0" align="center" cellpadding="0" cellspacing="0" class="test">
None.gif              
<tr>
None.gif                
<td width="150" height="70" valign="top" bgcolor="#FFFFFF" class="nav1style style46">
None.gif
<center>第(1)条</center>
None.gif
<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>
None.gif
None.gif
<center>第(2)条</center>
None.gif
<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>
None.gif
</td>
None.gif              
</tr>
None.gif      
</table>
None.gif    
</div>
None.gif    
<div id="layer3">
None.gif    
</div>
None.gif
</div>
None.gif
<script language="javascript">
None.gif    
var layerHeight = 100// 定义滚动区域的高度.
None.gif
    var iFrame = 1// 定义每帧移动的象素.
None.gif
    var iFrequency = 50// 定义帧频率.
None.gif
    var timer; // 定义时间句柄.
None.gif
    if(document.getElementById("layer2").offsetHeight >= layerHeight)
None.gif        document.getElementById(
"layer1").style.height = layerHeight;
None.gif    
else
None.gif        document.getElementById(
"layer1").style.height = document.getElementById("layer2").offsetHeight;
None.gif    document.getElementById(
"layer3").innerHTML = document.getElementById("layer2").innerHTML;
ExpandedBlockStart.gifContractedBlock.gif    
function move()dot.gif{
InBlock.gif        
if(document.getElementById("layer1").scrollTop >= document.getElementById("layer2").offsetHeight)
InBlock.gif            document.getElementById(
"layer1").scrollTop -= (document.getElementById("layer2").offsetHeight - iFrame)
InBlock.gif        
else
InBlock.gif            document.getElementById(
"layer1").scrollTop += iFrame
ExpandedBlockEnd.gif    }

None.gif    timer 
= setInterval("move()",iFrequency);
ExpandedBlockStart.gifContractedBlock.gif    document.getElementById(
"layer1").onmouseover=function() dot.gif{clearInterval(timer);}
ExpandedBlockStart.gifContractedBlock.gif    document.getElementById(
"layer1").onmouseout=function() dot.gif{timer=setInterval("move()",iFrequency);}
None.gif
</script>
None.gif
</body>
None.gif
</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" 默认值  --表示在两端之间来回滚动。
      看下例子把:

None.gif           <marquee behavior="scroll">behavior="scroll"表示由一端滚动到另一端;</marquee>
None.gif           
<marquee behavior="slide">behavior="slide":表示由一端快速滑动到另一端,且不再重复;;</marquee>
None.gif           
<marquee behavior="alternate">behavior="alternate"表示在两端之间来回滚动。</marquee> 
None.gif         
direction:--left(默认值) 左; right 右;up 上;down 下;
bgcolor--背景颜色
height--高度
weight--宽度
Hspace和vspace--分别用于设定滚动字幕的左右边框和上下边框的宽度。 作用大概和 css中的 margin 差不多`
scrollamount--用于设定每个连续滚动文本后面的间隔,该间隔用像素表示,
              以上是官方说法,其实就是滚动的速度,
              值不能太大,要不从视觉角度来说,是没反映的
              值越大速度越快 反之越慢咯 ```
scrolldelay--延迟时间
loop--这个属性大家也很熟悉把,循环次数; loop=-1的时候 一直重复循环 默认值
None.gif        <marquee scrollamount="15">scrollamount="15" 15的时候 就很快了 </marquee>
None.gif       
<marquee scrollamount="5">scrollamount="5"  </marquee>
None.gif       
<marquee scrollamount="5" direction="up">scrollamount="5"direction="up" </marquee>
None.gif       
<marquee scrollamount="3" direction="right">scrollamount="3"direction="right" </marquee>
None.gif       
<marquee scrollamount="3" direction="left" loop="10">scrollamount="3" direction="left" loop="10" </marquee>
None.gif       
好 现在我们再来接触一些 Dcode 的一些知识
首先是两个鼠标事件
onmouseover 鼠标触发事件---当用户将鼠标指针移动到对象内时触发
onmouseout  鼠标滑出事件---当用户将鼠标指针移出对象边界时触发
这里要用到的是 this.start() 与this.stop()
onmouseover="this.stop();" onmouseout="this.start
意思就是 鼠标移到marquee的内容上的时候 停止循环
鼠标移开 marquee 又开始移动
None.gif<marquee direction="up" onmouseover="this.stop();" onmouseout="this.start();">
None.gif阿米的眼泪
<br>
None.gif眼泪的阿米
<br>
None.gifamily
<br>
None.gif
</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 方法取消先前开始的间隔事件。

好 现在我们先看看 我佛山人(前辈呀)的一段程序
None.gif<div id=ami style=overflow:hidden;height:50;width:150> 
None.gif    
<div id=ami1>
None.gif我是打头的
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
None.gif    
</div>
None.gif    
<div id=ami2></div>
None.gif
</div>
None.gif
<script>
None.gif
var speed=30;
None.gifami2.innercode
=ami1.innercode
None.gif
function Marquee()
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif    
if(ami2.offsetTop-ami.scrollTop<=0)
InBlock.gif        ami.scrollTop
-=ami1.offsetHeight;
InBlock.gif    
else
InBlock.gif        ami.scrollTop
++;
ExpandedBlockEnd.gif}

None.gif
var MyMar=setInterval(Marquee,speed)
ExpandedBlockStart.gifContractedBlock.gifami.onmouseover
=function() dot.gif{clearInterval(MyMar)}
ExpandedBlockStart.gifContractedBlock.gifami.onmouseout
=function() dot.gif{MyMar=setInterval(Marquee,speed)}
None.gif
</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>
大家不理解的话
看这个例子
None.gif 
None.gif
<MARQUEE id=m1 direction=up style="border-width:2px;border-style:solid;"
None.gifwidth
=200 height=200>向上</MARQUEE><BR>
None.gif
<!-- 单击此按钮可在字幕滚动时读取 scrollLeft 和 scrollTop 属性的值。 -->
None.gif
<BUTTON onclick="alert('scrolltop: ' + m1.scrollTop + ' scrollLeft: ' + m1.scrollLeft)">读取</BUTTON>
None.gif
<!-- 当字幕停止时,你可以设置水平字幕的 scrollLeft,或者设置垂直字幕的 scrollTop。 -->
None.gif
<BUTTON onclick="m1.stop();m1.scrollTop = 100;">停止并设置 scrollTop=30</BUTTON>
None.gif
<BUTTON onclick="m1.start();">开始</BUTTON>
好的 接下来 同理可得
None.gif<div id=demo style=overflow:hidden;height:85 onmouseover="ii=1" onmouseout="ii=0" >
None.gif
<div id=demo1>
None.gif我是打头的
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
None.gif
</div>
None.gif
<div id=demo2></div>
None.gif
None.gif 
<script>
None.gif
var ii=0;t=demo.scrollTop
None.gifdemo2.innercode
=demo1.innercode
ExpandedBlockStart.gifContractedBlock.gif
function qswhMarquee()dot.gif{
InBlock.gif
if (ii==1)return
InBlock.gif
if(demo2.offsetTop-demo.scrollTop<=0)
InBlock.gifdemo.scrollTop
-=demo1.offsetHeight
InBlock.gif
else
InBlock.gifdemo.scrollTop
++
ExpandedBlockEnd.gif}

None.gifsetInterval(qswhMarquee,
60)
None.gif
</script></div>
再同理......嘿嘿
None.gif <div style="width:200px;height:150px;overflow:hidden" onmouseover="try{clearTimeout(timer1)}catch(e){;}" onmouseout="timer1=setInterval('newsScroll()',10)">
None.gif
<table cellspacing=0 cellpadding=5 bgcolor=#F8F8F8 style="position:relative;top:0px;width:200px;table-layout:fixed" id=news>
None.gif  
<tbody>
None.gif  
<tr>
None.gif    
<td valign=top height=150>
None.gif      
<b>新闻一</b><br>
None.gif  我是打头的
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
None.gif    
</td>
None.gif  
</tr>
None.gif  
<tr>
None.gif    
<td valign=top height=150>
None.gif      
<b>新闻二</b><br>
None.gif    我是打头的
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif    
</td>
None.gif  
</tr>
None.gif  
<tr>
None.gif    
<td valign=top height=150>
None.gif      
<b>新闻三</b><br>
None.gif     我是打头的
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif    
</td>
None.gif  
</tr>
None.gif  
</tbody>
None.gif  
<script language=javascript>
None.gif    
//重复一次新闻内容
None.gif
    document.write(news.tBodies[0].innercode)
None.gif  
</script>
None.gif
</table>
None.gif
</div>
None.gif
None.gif
<script language=javascript>
None.gif  
//实现不间断滚动
None.gif
  function newsScroll()
ExpandedBlockStart.gifContractedBlock.gif  
dot.gif{
InBlock.gif    news.style.pixelTop
=(news.style.pixelTop-1)%(news.clientHeight/2);
ExpandedBlockEnd.gif  }

None.gif  timer1
=setInterval('newsScroll()',10)  //更改第二个参数可以改变速度,值越小,速度越快。
None.gif
</script>

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

 

None.gif<div id=ami style=overflow:hidden;height:50;width:150> 
None.gif    
<div id=ami1>
None.gif我是打头的
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
<br>
None.gif我向上运动
None.gif    
</div>
None.gif    
<div id=ami2></div>
None.gif
</div>
None.gif
None.gif
<script>
None.gif
var speed=30
None.gifami2.innercode
=ami1.innercode
None.gifami.scrollTop
=ami.scrollHeight
ExpandedBlockStart.gifContractedBlock.gif
function Marquee()dot.gif{
InBlock.gif
if(ami1.offsetTop-ami.scrollTop>=0)
InBlock.gifami.scrollTop
+=ami2.offsetHeight
ExpandedSubBlockStart.gifContractedSubBlock.gif
elsedot.gif{
InBlock.gifami.scrollTop
--
ExpandedSubBlockEnd.gif}

ExpandedBlockEnd.gif}

None.gif
var MyMar=setInterval(Marquee,speed)
ExpandedBlockStart.gifContractedBlock.gifami.onmouseover
=function() dot.gif{clearInterval(MyMar)}
ExpandedBlockStart.gifContractedBlock.gifami.onmouseout
=function() dot.gif{MyMar=setInterval(Marquee,speed)}
None.gif
</script>
最后整理

转载于:https://www.cnblogs.com/yongning/archive/2007/09/18/897120.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值