用JavaScript制作活动字幕

吞天丶我戳

吞天丶我戳

2016-02-19 22:12

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享用JavaScript制作活动字幕教程,希望对大家能有一点小小的帮助。

  活动字幕是网页中经常使用的组件之一,它能使整个网页更有动感,显得很有生气。现在的网站中也越来越多地使用活动字幕来加强网页的互动性。用JavaScript编程可以实现各种活动字幕效果,所需的代码很少,确实能够以较少的下载时间换来较好的效果。该标记语法格式如下:


  〈marquee

aligh=left/center/right/top/bottom

bgcolor=#n

font=n

direction=left/right/up/down

behavior=type

height=n

hspace=n

scrollamount=n

Scrolldelay=n

width=n

VSpace=n

loop=n〉 

可以看出由于活动字幕的显示方式多种多样,可选的参数也很多。

Bgcolor:用于设定活动字幕的背景颜色,一般是十六进制数。

Behavior:用于设定滚动的方式,主要由三种方式:behavior="scroll"表示从一端滚动到另一端;behavior="slide"表示从一端快速滑动到另一端,且不重复;behavior="alternate"表示在两端之间来回滚动。

Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。

Scrollamount:用于设定活动字幕一次滚动的距离。

scrolldelay:用于设定滚动两次之间的延迟时间。

Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。

〈marquee〉标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。下面是两个通过JavaScript编程实现特殊效果活动字幕的脚本代码: 

★带链接的水平滚动字幕★

带链接的水平滚动字幕一般用于广告宣传,非常醒目: 

〈script language="JavaScript"〉

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

var marqueewidth=400

var marqueeheight=20

var speed=4

var marqueecontents='〈strong〉〈big〉欢迎访问 〈a href="http://www.cce.com.cn"〉中国电脑教育报网站〈/a〉 欢迎您光临 〈a href="mailto:net@cce.com.cn"〉给我来封信!〈/a〉〈/big〉〈/strong〉〈/font〉'

document.write('〈marquee scrollAmount='+speed+' style="width:'+marqueewidth+'"

〉'+marqueecontents+'〈/marquee〉')

〈/script〉   

★带链接的垂直滚动字幕★

垂直滚动的活动字幕常用于以滚动方式发布新闻。脚本代码中参数“behavior、derection、width、height、scrollamount、scrolldelay”分别确定了活动字幕的滚动方式、滚动方向、宽度、高度、一次滚动距离、延迟时间等,另外参数“onmouseover='this.stop()'”所实现的效果是当鼠标指针移动到活动字幕上时,字幕停止滚动,参数“onmouseout='this.start()'”恰好与之相反。 

〈script language=vbScript〉document.write("〈marquee behavior=scroll direction=up width=130 height=80 scrollamount=1 scrolldelay=60 onmouseover='this.stop()' onmouseout='this.start()'〉")〈/script〉

〈p〉〈a href="http://www.sohu.com"〉

〈/a〉〈br〉

〈a href="xwgg/bys.htm "〉~=~〉〉毕业班学生下周离校〈/a〉〈br〉

〈a href="xwgg/fj.htm " 〉~=~〉〉7月10日放暑假〈/a〉 〈br〉

〈a href="xwgg/slnh"〉~=~〉〉省水利年会在我校召开〈/a〉 〈br〉 〈br〉

〈script language=vbScript〉document.write

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

("〈/marquee〉")〈/script〉

〈/p〉 


  将上述代码嵌入网页中的适当位置,并改变链接内容即可得到一个滚动的新闻公告栏。

展开更多 50%)
分享

猜你喜欢

用JavaScript制作活动字幕

Web开发
用JavaScript制作活动字幕

用VBScript制作活动主页

编程语言 网络编程
用VBScript制作活动主页

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

教你用Javascript制作连续滚动的字幕

Java JAVA基础
教你用Javascript制作连续滚动的字幕

Photoshop制作活动专题汽车网站首页教程

PS PS基础 ps平面设计教程 ps去水印教程
Photoshop制作活动专题汽车网站首页教程

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用javascript代替marquee的滚动字幕效果代码

Web开发
用javascript代替marquee的滚动字幕效果代码

怎样用dreamweaver制作滚动字幕

Web开发
怎样用dreamweaver制作滚动字幕

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

javascript实现页面淡出效果

javascript实现页面淡出效果

Win8系统如何限制磁盘的访问?

Win8系统如何限制磁盘的访问?
下拉加载更多内容 ↓