无间断滚动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) |
