注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

湖北电气的博客

万丈红尘三杯酒,千秋大业一壶茶。

 
 
 

日志

 
 
关于我

生产销售高低压开关柜、智能箱式变电站、电力变压器、配电箱、电缆桥架、母线槽、箱变外壳等系列产品,承接35KV及以下电力工程施工(含报装、安装、验收直至送电运行)。

【引用】引用 滚动字幕制作大全   

2011-10-13 18:56:32|  分类: 博客知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

muwenju2008滚动字幕制作大全

1.上下滚动:

代码:<MARQUEE style="FONT-SIZE: 12px; WIDTH: 132px; COLOR: rgb(34,34,221);

LINE-HEIGHT: 17px; HEIGHT: 125px" scrollAmount=1 scrollDelay=1 direction=up

height=125>这里是文字<BR></MARQUEE>

2.左右滚动:

代码:<marquee direction="left" scrollamount="1" scrolldelay="10" border="0"

width=500 >

 

代码:<marquee   scrollamount="1" scrolldelay="60" direction="up" width="180"

height="210"><div><font color="#ff0000"><b>本站公告</b></font></div><div><font

color="#003366">文字哦</font></div></marquee>

 

 

2. 如何做滚动字幕和滚动图片,大漠孤烟的玩转BLOG上有提供滚动字幕代码,他的方法是教人们在WORLD编辑器里编辑要滚动文字的显示效果的,而现在要额外补充一下教大家如何用代码来编辑字体大颜色和大小,其实原理都是一样的,源代码都是一样的,只是他的方法比较方便,快捷了点而已,如果不会用代码的,建议用他的方法!

 

  一、滚动字幕的HTML最基本语法是:<MARQUEE>要滚动的文字</MARQUEE>

 

  这是最原始,最简单,没有任何修饰的滚动,而要它能显示出各种不同的效果需要对其进行各种参数的设定,比如让大家看一下下面这段代码:

 

<MARQUEE style="color:#660099;font size=20" scrollAmount=2 scrollDelay=50 direction=up width=480 height=150 bgcolor=#ecf5ff behavior=scroll>

<FONT color=blue><I>·欢迎来到小涛De的博客</FONT></I><BR>

<FONT color=#660099 size=3>·<U>让我们建立和谐环境,促进交流</U></FONT><BR>

<FONT color=#990066 size=4 face=隶书>·建设良好的博客氛围,促进共同进步</FONT><BR>

<FONT color=#990033 size=3>·为了美化博客,丰富博客<A href="http://muwenju2008.blog.163.com/" target=_blank>(欢迎来访)</A></FONT><BR>

<FONT color=#990099 size=4><B>·丰富生活,让我们一起努力</B></FONT><BR>

<FONT color=blue face=华文行楷>·加油,我的朋友</FONT></MARQUEE>

 

  效果如下:

 

·欢迎来到小涛De博客

·让我们建立和谐环境,促进交流

·建设良好的博客氛围,促进共同进步

·为了美化博客,丰富博客(欢迎来访)

·丰富生活,让我们一起努力

·加油,我的朋友

 

  代码中各参数详解(请仔细看每行的代码和其相对应的显示效果):

  a)color:#660099;font size=20用来定义所有滚动字体的大小和颜色,如果要单独定义某行字体,则如代码中那样,在每句前后加<FONT color=#990066 size=4>和</FONT>,如果对字体的定义都是一样的,那么只要定义前面的了,后面的就不需要了。

  b)链接地址" target=_blank>和</A>,如代码中所写的那样,target=_blank表示链接在新窗口中打开。

  i)每行字的前后<FONT color=#990066 size=4 face=隶书>和</FONT>用定义每行字的颜色,大小和字体,如果哪项不需要的话,把代码去掉就行。

  j)用WORLD编辑过东西的人都知道,<I>表示倾斜,<U>表示下划线,<B>表示加粗,加粗有可以是<STRONG>。

  k)<BR>表示换行。

 

PS:滚动方法虽然是教了,而上面的代码也只是演示了一下综合效果,但是看到很多朋友还是不会灵活运用,只照搬上面的那段代码。其实要做简单的滚动的话复制下面这段代码就行了,要表现出其他效果,按照我说的增加参数就行了。

 

<MARQUEE scrollAmount=2 scrollDelay=50 direction=up width=480 height=180 behavior=scroll>滚动文字</MARQUEE>

  

  二、既然知道了滚动字幕如何制作了,制作滚动图片就应该没什么问题了,简单图片滚动的代码如下:

 

<MARQUEE scrollAmount=4 scrollDelay=60 direction=right width=190 height=250>

<IMG width=190 height=250 src="你喜欢的图片地址" border=0>

<IMG width=190 height=250 src="你喜欢的图片地址" border=0>

<IMG width=190 height=250 src="你喜欢的图片地址" border=0>

<IMG width=190 height=250 src="你喜欢的图片地址" border=0></MARQUEE>

 

  参数说明:

  a)第一个的width和height表示滚动窗口的大小,后四个用来定义滚动图片的大小,图片的大小最好别超过滚动窗口的大小,如果图片的高度值大于滚动窗口的高度值,那么最后效果显示的窗口高度是图片的高度!

  b)如果要增加图片只要加<IMG width=190 height=250 src="你喜欢的图片地址" border=0>就行了!

  c)如果要对图片进行链接,只要在<IMG width=190 height=250 src="你喜欢的图片地址" border=0>前后加<A href="链接地址" target=_blank>和</A>就行了,同样,target=_blank表示链接在新窗口中打开!

 

  至于滚动图片的效果在这里就不演示了!

  

  补充:滚动字体特效中的各种参数不是单一的,而是可以随意组合的,比如下面这段代码的简单组合:

 

<MARQUEE scrollAmount=8 direction=up behavior=alternate height=80 width=499>

<MARQUEE scrollAmount=4 direction=right behavior=alternate height=50>

<font color=#990066 size=5 face=华文行楷>欢迎光临,祝您快乐 !</font></MARQUEE></MARQUEE>

如果想加上连接按这样填写

<MARQUEE scrollAmount=8 direction=up behavior=alternate width=499 height=80>

<MARQUEE scrollAmount=4 direction=right behavior=alternate height=50><FONT face=华文行楷 color=#990066 size=5><A href="http://xiaotao1983.bokee.com/" target=_blank>欢迎光临,祝您快乐</A> !</FONT></MARQUEE></MARQUEE></DIV>

 

从下面的演示效果中可以看出其奇妙性,大家就可以知道,可以组合的方式是多种多样的!

 

3.滚动字幕制作大全

  

很多不是计算机、网络相关专业的朋友其其他未看过Html书籍的朋友可能不知道滚动字幕(含图片等)如何制作,下面做一个比较详细的介绍

滚动字幕其实就是使用html里面的 marquee 标签,在FrontPage的组件里就有的,但是FrontPage这个软件只能支持单行文字,一出现多行文字它就无能为力了,而且它只 能支持一行滚动!(如果出现只能滚动一行的情况,解决办法是把这段代码嵌入到JavaScript的document.write里面,请看下面例d的详细说明)Dreamweaver也只能用编写HTML代码 的方法。所以强烈建议用记事本打开网页源代码来编辑。

 

1.建立第一个滚动字幕。代码:

<marquee scrollAmount=2 width=300>看我会动啦</marquee>

效果如: 看我会动啦

 

2.各参数详解:

a)中央电视台

 

b)

    _onmouseover=this._stop()表示当鼠标移动到上面时停止

    _onmouseout=this._start()表示移出时开始滚动

     因网易屏蔽了脚本,在此无法举例,且在实际应用中,删除里面的下划线,这里不加下划线是会被网易当成脚本而强制删除的...

 

c)交替效果。代码如:

<marquee scrollAmount=2 width=99 中央电视台
·空气好清新啊

·今朝食乜好呢?

·中央电视台

·注意:如果你的网页经过了FrontPage编辑,保存之后,只能滚动一行,这时候你发现你原来的代码顺序已经变了,My god!解决的办法是,找出原来的代码,把它嵌入 到JavaScript的document.write中即可,上述代码写为:

<script> document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好 啊!<br>·空气好清新啊<p>·<a href=http://www.cctv.com>中央电视台</a></marquee>')</script>

e)改变滚动字幕的颜色?可以用样式表来控制。如下效果,代码是<marquee scrollAmount=2 width=300 style="color:#e5ebf0">看我会动啦</marquee>。

看我会动啦

    仅用了marquee标签会有一个不太爽的地方,就是每滚完一次会有一段空白,下面介绍一种能够实现无缝连接的方法

<html>

<head>

</head>

<body>

<TD WIDTH=390 HEIGHT=99><MARQUEE  scrollAmount=4 scrollDelay=0 loop=1 width=390 height=99>

            <SCRIPT language=JavaScript>

   for(t=1;t<=1000;t++)

   document.write("11111111111112222222222222222233333333333333")

</SCRIPT>

             </MARQUEE></TD>

</body>

</html>

    同理,因为使用了脚本,在此无法给出效果预览

 

    滚动的图片呢,其实是一样的啊,就将内容由文本换成图片就可以了^_^引用 滚动字幕制作大全  - 高原红 - 高原红的博客,其他都差不多的,也来个实例吧

    <marquee scrollAmount=2 width=300>^_^<IMG src="http://mimg.163.com/popo/smile02.gif"></marquee>

    

^_^引用 滚动字幕制作大全  - 高原红 - 高原红的博客

备注:由于网易博客目前过虑了所有的脚本,以上所说的使用脚本来实现的内容在网易博客不适用,但可用于个人网页设计等。

 

     7.图片来回走代码:(以下代码适用较小的图片,才能看到全部效果)

<marquee behavior="alternate"  

direction="150" height="200"  

width="60%" scrollamount="2"  

scrolldelay="0"><marquee behavior="alternate"  

scrollamount="3"><img src=图片地址>   

</marquee></marquee>

 

     几张图片一起来回走:

<marquee behavior="alternate"  

direction="150" height="200"  

width="60%" scrollamount="2"  

scrolldelay="0"><marquee behavior="alternate"  

scrollamount="3"><img src=图片地址><img src=图片地址><img src=图片地址>……    

</marquee></marquee>  

 

其中这个是高和宽:direction="150" height="200

  评论这张
 
阅读(56)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018