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

最新推荐文章于 2019-01-20 20:48:09 发布

转载最新推荐文章于 2019-01-20 20:48:09 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yongning/archive/2007/09/18/897120.html

文章标签：

#javascript #ViewUI

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

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

<html>

<head>

<!--

.test

{

font-size: 12px;

line-height: normal;

text-decoration: none;

}

-->

</style>

<head>

<body>

<tr>

<a href="aspfile/show_article.asp?id=3038" title="关于＜＜电气工程自动化＞＞研究生班授课的通知" class="none_underline" target="_blank"><font color=#ff0000>关于＜＜电气工程自动化＞＞研究生班授课的通知 2006-3-9</font></a><br><br>

<a href="aspfile/show_article.asp?id=3036" title="关于企业管理研究生班授课的通知" class="none_underline" target="_blank"><font color=#ff0000>关于企业管理研究生班授课的通知 2006-3-8</font></a><br><br>

</td>

</tr>

</table>

</div>

</div>

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 又开始移动

阿米的眼泪<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 方法取消先前开始的间隔事件。

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

我是打头的<br>

我向上运动<br>

我向上运动

</div>

</div>

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>

<BUTTON onclick="m1.stop();m1.scrollTop = 100;">停止并设置 scrollTop=30</BUTTON>

好的接下来同理可得