关于代码!如何制作HTML字幕动画效果!

关于代码!如何制作HTML字幕动画效果!,第1张

我们在浏览网页的时候,有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的呢?这里我们就来看一看。

当然我们可以利用flash或者采用Gif动画来实现,但是这种方式往往占用的空间比较大,而且不如HTML标记来得那么简单。这个标记就是Marquee标记,中文翻译为“跑马灯”。IE30以上版本的浏览器中支持这个HTML标记,而NetScape则不支持。因此我们在设计网页的时候需要考虑这个问题。

Marquee标记的基本语法结构如下所示:

其中ALIGN可以用来指定滚动字幕与左右文字的对齐方式,它的值可以有top、middle、bottom等;

BEHAVIOR用来指定滚动字幕的滚动方式,它的属性值有scroll、slide和alternate三个,scroll表示滚动字幕内容向同一方向重复滚动,slide表示滚动字幕内容从一端向另一端滚动并在另一端停止,alternate表示滚动字幕内容在两端之间来回往复滚动;

DIRECTION指定滚动字幕的滚动方向,它的属性值有left和right两个,分别表示滚动字幕由右向左和由左向右滚动;SCROLLAMOUNT用来设置多次滚动之间的间隔距离,其单位是pixels(像素);

SCROLLING用来指定滚动字幕滚动一次所需要的时间,单位是ms(千分之一秒),其值的大小将直接影响滚动字幕的滚动速度;

LOOP属性是用来指定滚动字幕的滚动次数的,当它的值为“-1”时,滚动字幕将连续滚动直到浏览器载入下一个页面;

HSPACE和VSPACE则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。

下面我们看一看跑马灯的效果。(注意:这种跑马灯的效果只在InternetExplorer中能看到,Netscape不支持marquee标记)

在主页中制作会移动的文字

贺治卫(05/10/2000)

基本语法:

需要移动的文字

1方向#left,right

例:从右向左移动>

从左向右移动>

2次数#scroll,slide,alternate

例:一圈一圈的绕着移动>

只移动一次就停>

来回移动,不停>

3循环#次数,若未指定则循环不止(infinite)

例:只走3趟

4速度加快

例:移动速度加快>

5速度减慢

例:移动速度减慢

6底色

#rrggbb16进制数码,或者是下列预定义色彩:

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,

Fuchsia,White,Green,Purple,Silver,Yellow,Aqua

例:是红色的

7面积

例:面积变大了

<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="路径" width="100"></td>
<td><img src="路径" width="100"></td>
<td><img src="路径" width="100"></td>
<td><img src="路径" width="100"></td>
<td><img src="路径" width="100"></td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1//速度数值越大速度越慢
demo2innerHTML=demo1innerHTML
function Marquee(){
if(demo2offsetWidth-demoscrollLeft<=0)
demoscrollLeft-=demo1offsetWidth
else{
demoscrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demoonmouseover=function() {clearInterval(MyMar)}
demoonmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

走马灯,就是利用蜡烛燃烧加热空气,造成气流,产生的气流推动轮轴旋转,进而带动灯笼不停的转动,按此原理造成的灯就是走马灯。让灯笼上转动的画面给,人们美的视觉享受。灯内点上蜡烛,烛产生的热力造成气流,令轮轴转动。轮轴上有剪纸,烛光将剪纸的影投射在屏上,图像便不断走动。因多在灯各个面上绘制古代武将骑马的图画,而灯转动时看起来好像几个人你追我赶一样,故名走马灯。

走马灯现代用法:

1流动字幕。

显示屏横向或直向不断移动的字幕,常用于电视新闻镜面,如新闻跑马灯。新闻跑马灯(简称“跑马灯”)是在电视新闻画面上的一个小空间,通常是用来显示头条新闻或是新闻报道中较小的细节。跑马灯有时也指在某些建筑物、网站或室内空间用来表现讯息的显示版。

2网站跑马灯。

在电脑上当然也可以弄出新闻跑马灯这个玩意,早在二十一世纪初,新浪网、搜狐网就已经推出网络新闻跑马灯技术。

作为一枚程序猿,能把自己学到的那点可怜的技术记录下来并分享出来真的是件身心愉悦的事情。
以下记录三种方式实现TextView文字滚动的效果。
第一种:原生的android自带的跑马灯效果。直接申明TextView属性。
第二种:改造TextView,自定义View继承的TextView,利用Runnable循环调用onDraw()方法更新视图。
第三种:利用HorizontalScrollView控件的特性,里面加个TextView,通过定时器让HorizontalScrollView循环滑动,达到跑马灯效果。
>

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/yw/13339426.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-17
下一篇 2023-07-17

发表评论

登录后才能评论

评论列表(0条)

保存