`
shuai1234
  • 浏览: 971805 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

html文字滚动代码

阅读更多

代码如下<MARQUEE>滚动文字</MARQUEE>

<marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" >
<div align="left" ><br />
</div >
<center ><font face="黑体" color="#008000" size="4" ></font ></center >
<div align="left" ><br />
</div >
<center >
<p ><font color="#ff6600" size="4" >滚动文字</font ></p >
<p ><font color="#ff4500" size="4" >滚动文字</font ></p >
<p ><font color="#ff3300" size="4" >滚动文字</font ><br />
<br />
</p >
</marquee >


marquee 参数:
BGColor:滚动文本框的背景颜色。
Direction:滚动方向设置,可选择Left、Right、up和down。
scrolldelay:每轮滚动之间的延迟时间,越大越慢。
scrollamount:一次滚动总的时间量,数字越小滚动越慢。
Behaviour:滚动的方式设置,三种取值:Scroll(循环滚动) lide(单次滚动)、Alternate(来回滚动)。
Align:文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。
Width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
Height:滚动文本框的高度,输入一个数值后从后面的单选框选择in Pixels(按像素)或是in Percent(按百分比)。
loop:滚动次数。默认为infinite
hspace、vspace:前后、上下的空行。

     滚动字幕会让很多人感到兴奋,特别是第一次使用滚动字幕时,会爱不释手。滚动字幕我也做得不少了,对它也不会兴奋了,所以现在也用得不多了。有不少朋友常 问到这是怎么做的,现在做一个详细的专题,让你更全面地了解一下。
滚动字幕在FrontPage的组件里有,但是FrontPage这个软件只能支持单行文字,一出现多行文字它就无能为力了,而且它只能支持一行滚动! (如果出现只能滚动一行的情况,解决办法是把这段代码嵌入到JavaScript的document.write里面,请看下面例d的详细说 明)Dreamweaver也只能用编写HTML代码的方法。所以强烈建议用记事本打开网页源代码来编辑。

1.建立第一个滚动字幕。代码:
<marquee scrollAmount=2 width=300>靓丽风景线</marquee>
效果如: 靓丽风景线

2.各参数详解:
a)scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
c)direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up 表示↑,down表示↓。
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止 滚动)

3.实例:
a)如何给滚动字幕加超链接?这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果,代码是<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>,点击中央电视台就可以进入 了:
中央电视台

b)如何制作当鼠标停留在文字上,文字停止滚动?
代码如:
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如:
文字内容

c)交替效果。代码如:
<marquee scrollAmount=2 width=99 behavior=alternate>文字内容</marquee>
效果如:
文字内容

d)多行文本向上滚动。代码如:
<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·你还好吗<p>·<a href=http://www.cctv.com>靓丽风景线</a></marquee>
效果如:
·早晨好啊!
·空气好清新啊
·你还好吗
·靓丽风景线

·注意:如果你的网页经过了FrontPage编辑,保存之后,只能滚动一行,这时候你发现你原 来的代码顺序已经变了,My god!解决的办法是,找出原来的代码,把它嵌入到JavaScript的document.write中即可,上述代码写为:
<script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·你还好吗 <p>·<a href=http://www.cctv.com>靓丽风景线</a></marquee>')< /script>

e)改变滚动字幕的颜色?可以用样式表来控制。如下效果,代码是<marquee scrollAmount=2 width=300><a style=color:CC6600>你还好吗</a></marquee>。
你还好吗

图片滚动
用<img src=相对路径/文件名>的语句。并且要注意图片名不要中文,要注意区分英文大小写。

图片做超链接
用<a href=>和</a>把<img>包围,并且img必须设border=0,否则图片会出现蓝框。正确的例子如:& lt;a href=http://www.webshu.com><img src=../../j/01.jpg border=0></a>
其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FP或DW做网页的时候,要多查看源代码。

多张图片排列滚动
通常图片和图片之间用<br>(回行)或<p style=margin-top:9>(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到 marquee中,让这个表格来滚动。 

代码<script>document.write('<marquee scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()><a href=http://www.webshu.com><img src=../../j/01.jpg border=0></a></marquee>')</script>

分享到:
评论

相关推荐

    文字滚动代码教程

    ### 文字滚动代码教程知识点详解 #### 一、引言 在网页设计中,动态效果能够有效提升用户体验,增加页面的吸引力。其中,文字滚动是一种常见的动态效果,它可以通过简单的HTML标签实现。本文将详细介绍如何利用`...

    经典新闻滚动代码,左右,上下滚动

    总的来说,"经典新闻滚动代码,左右,上下滚动"这一主题涵盖了网页动态效果的实现,包括HTML布局、CSS动画和JavaScript编程。无论是从头编写还是利用现有库,掌握这些技能都能帮助开发者创建更具吸引力的网页。

    课程公告(文字向上滚动代码)万能代码

    用与课程公告文字滚动,或者图片滚动都可以用词代码,把里面的文字修改一下,就成了你的代码。

    JS实现文字间隔性滚动代码

    总结,实现JS间隔性滚动代码主要涉及HTML结构、CSS样式以及JavaScript的DOM操作和定时器使用。理解这些基础概念,再结合实际项目需求,可以轻松创建出各种动态的文字滚动效果。通过不断学习和实践,你可以掌握更多...

    HTML中实现文字各种滚动

    通过以上介绍,我们可以看到`&lt;marquee&gt;`标签虽然功能有限,但在实现简单的文字滚动效果方面仍然具有一定的实用价值。对于初学者来说,掌握这一标签的基本用法不仅有助于理解HTML的基本机制,也能为日后学习更高级的...

    web15种滚动代码

    本文将详细解析15种不同的Web滚动代码,帮助开发者实现各种炫酷的滚动文字特效。 1. **文字来回滚动**:使用`&lt;MARQUEE&gt;`标签,设置`scrollAmount`属性控制滚动速度,`behavior`属性设为`alternate`实现来回滚动。 ...

    文字滚动代码 marquee style="WIDTH: 388px;

    ### 文字滚动代码详解:`&lt;marquee&gt;` 标签及其属性 在网页设计与开发过程中,有时我们需要实现一些简单的动态效果,例如滚动的文字或图片等。这些效果可以通过使用 HTML 的 `&lt;marquee&gt;` 标签来轻松实现。下面将详细...

    jQuery弹幕文字滚动代码.zip

    jQuery弹幕文字滚动代码是一种常见的网页动态效果,用于在页面背景上模拟电视屏幕下方滚动的文字信息,常用于展示公告、广告或用户评论等。这个压缩包"jQuery弹幕文字滚动代码.zip"包含了一个实现此类效果的jQuery...

    文字无缝滚动效果代码

    【文字无缝滚动效果代码】是一种常见的网页动态设计技术,它可以使文字或图片在网页上以平滑、连续的方式滚动,从而吸引用户的注意力并增加视觉吸引力。这种效果在新闻网站、公告栏、广告横幅等场景中广泛应用。在这...

    css3的广告文字向下滚动切换代码.zip

    这是一款简单的css3广告文字向下滚动切换代码,css文字滚动轮播效果,可自定义文字样式跟背景颜色。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单的CSS...

    jQuery排名文字滚动代码.zip

    【jQuery排名文字滚动代码】是一种常见的网页动态效果,它利用jQuery库实现文本的滚动展示,通常用于显示排行榜、新闻更新或者重要公告等信息。在网页设计中,这种滚动效果能够吸引用户注意力,节省页面空间,并增加...

    jQuery的购买记录列表文字滚动更新代码.zip

    这个压缩包中的"jQuery的购买记录列表文字滚动更新代码"应该包含了实现以上功能的JavaScript文件和相关的HTML模板。开发者可以参考这些代码,根据实际项目需求进行修改和定制。 总的来说,理解并实现这个代码可以...

    文字滚动消息广告代码.rar

    【文字滚动消息广告代码】是一种常见的网页动态效果,它通过JavaScript语言实现,使得文本信息在网页上以滚动的形式展示,以此吸引用户的注意力并传递广告信息。这种特效在网站的页眉、页脚或者侧边栏中经常被用作...

    无缝文字滚动方案

    一般会包含HTML结构、CSS样式和JavaScript代码,通过对这些代码的学习,可以深入理解无缝文字滚动的实现过程和细节。 总之,无缝文字滚动方案是通过JavaScript动态更新文本内容,结合CSS样式实现的一种网页动态效果...

    图片,文字滚动脚本代码

    ### 图片与文字滚动脚本代码分析 #### 核心功能解析 此段代码主要利用了HTML和JavaScript来实现一个动态滚动的效果。具体来说,它能够使一系列的图片在网页上水平或垂直滚动展示,并且可以通过鼠标悬停来暂停滚动...

    收集几款图片滚动代码(横向、竖向、停顿、文字结合等)

    这里我们探讨几款图片滚动代码,包括横向、竖向、带有停顿和文字结合的多种实现方式。 首先,"经典向上滚动且停顿代码.doc"可能包含一段JavaScript或jQuery代码,实现了图片从下往上滚动的效果,并在滚动过程中设置...

    jquery图片文字滚动插件

    在提供的"demo.html"文件中,我们可以看到一个实际的图片文字滚动插件应用。通过查看源代码,可以看到HTML结构、CSS样式和JS脚本的配合。"images"文件夹包含用于滚动展示的图片资源,而"js"文件夹则包含了实现滚动...

    javascript不间断文字滚动控制代码

    在标题中提到的“javascript不间断文字滚动控制代码”,是指利用JavaScript实现的一种滚动文本的控制机制。这种机制通常结合HTML和CSS一起工作,通过JavaScript定时改变文本的位置来模拟滚动效果。下面我们将深入...

    网页中滚动字的源代码

    ### 滚动文字的基本HTML代码 网页中的滚动文字主要依赖于`&lt;marquee&gt;`标签来实现。这个标签允许网页元素以水平或垂直方式滚动显示,为网页增添了动感。下面是一个基础的滚动文字示例: ```html &lt;!DOCTYPE html&gt; ...

    jQuery文字逐行向上滚动代码.zip

    jQuery文字逐行向上滚动代码是一种常见的网页动态效果,它能够使文本内容以逐行上升的方式展示,常用于新闻更新、公告栏或者滚动广告等场景,为网页增添动态视觉效果,吸引用户注意力。在这个"jQuery文字逐行向上...

Global site tag (gtag.js) - Google Analytics