您的位置:首页 > 产品设计 > UI/UE

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

2009-02-19 09:40 344 查看

无间断滚动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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: