网页文字滚动的实现

     在许多网站中,都会包含滚动文字的特效,这些特效也可以称为走马灯特效,比如一些网站中的新闻公告。本实例将介绍如何在网页中实现滚动文字。运行本实例,如图1所示,将从网页的下方向上逐渐出现滚动的文字信息。

实现滚动文字的特效,主要是在页面中应用<marquee>标签。该标签专门用于实现文字或图片的滚动效果,其常用属性如下表所示

<marquee>标签的属性及说明


颜色和背景属性


说明


align


滚动内容的对齐方式:top(顶端对齐)、middle(居中对齐)、bottom(向下对齐)


direction


滚动的方向:up(向上)、down(向下)、left(向左)、right(向右)


behavior


滚动的方式:scroll(循环滚动)、slide(一次滚动)、alternate(交替滚动)


loop


循环滚动的次数,取值为-1或Infinite表示无限次滚动


scrollamount


滚动的速度,单位为像素,值越大滚动速度越大


scrolldelay


两次滚动的间隔时间


width


滚动区域的宽度,单位为像素或以百分比形式表示


height


滚动区域的高度


bgcolor


滚动区域的背景颜色


hspace


滚动区域与浏览器边界的水平距离


vspace


滚动区域与浏览器边界的垂直距离

事例代码如下:

创建index.htm页面,在该页中的适当位置,将要滚动内容添加到<marquee>标签中,然后通过设置<marquee>标签的相关属性来自定义滚动的显示效果,关键代码如下:

<marquee direction="up" onMouseOver="this.scrollAmount=‘1‘" onMouseOut="this.scrollAmount=‘2‘" onMouseDown="this.scrollAmount=‘4‘;this.direction=‘down‘"onMouseUp="this.scrollAmount=‘1‘;this.direction=‘up‘" scrollAmount="2" height="291">

<table cellspacing="2" cellpadding="0" border="0" width="100%" align="center">

<tr>

<td height="30" style="color:yellow;font-size:10pt;font-weight:bold;">

<a href="#">柯南柯南柯南</a>

</td>

</tr>

<tr>

<td height="20" align="right" >公布时间:2016-05-01 </td>

</tr>

<tr>

<td height="30" style="color:yellow;font-size:10pt;font-weight:bold;">

<a href="#">某某网站</a>

</td>

</tr>

<tr>

<td height="20" align="right" > 公布时间:2016-05-1 </td>

</tr>

</table>

</marquee>

时间: 2024-08-25 08:24:08

网页文字滚动的实现的相关文章

HTML之marquee(文字滚动)详解

语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red>Hello, World</font></marquee> 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区

marquee|各种文字滚动代码(适用公告)

marquee|各种文字滚动代码(适用公告) 1.建立第一个滚动字幕.代码: <marquee scrollAmount=2 width=300>我钟意网页树树</marquee> 效果如: 我钟意网页树树 2.各参数详解: a)scrollAmount.它表示速度,值越大速度越快.如果没有它,默认为6,建议设为1-3比较好. b)width和height,表示滚动区域的大小,width是宽度,height是高度.特别是在做垂直滚动的时候,一定要设height的值.

html里面有一个控制文字滚动的标签marquee,比较有用。

本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字 通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是静态的.本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 4.3.1 设置文字滚动 HTML技术中使文字滚动的方法是使用双标签<marquee></marquee>.在HTML代码中可使其作用区文字滚动,默认为从右到左,循环滚动.在D:\we

html文字滚动代码 (转)

html文字滚动代码 代码如下<MARQUEE>滚动文字</MARQUEE> <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" ><div align="left" ><br /></div ><center ><font face=&

JS实现Li列表的无缝垂直文字滚动代码

非Table模式的新闻列表滚动,学习CSS的朋友可能都能做出这种效果来.运用了CSS中的Li列表标签,加上javaScript代码控制,完成完美的无缝滚动效果.在兼容性方面,在ie6,7,8,9,firefox等主流浏览器下均测试通过,用的时候您只需改变一下样式和大小,再将Js封装起来,用时候调用,就更简洁了,相信这款实用的文字滚动正是你需要的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http

C# 文字滚动特效(上下滚动)

本程序改编至网上下载的一个自定义控件,原控件是左右滚动效果,类似于跑马灯效果,由于项目需要,改编为上下滚动. 前期没有实现自动折行,今天刚加上自动折行. using System; using System.Collections; using System.ComponentModel; using System.Drawing; using System.Drawing.Drawing2D; using System.Data; using System.Windows.Forms; usi

Case1 文字滚动

1.在home页面添加一个矩形(标题),在其下添加一个动态面板. 2.动态面板为1,其状态为1.1 3.双击进入状态1.1, 添加新的动态面板2,(面板长度大于动态面板1) 4.动态面板为2,其状态2.1, 并添加相关文字叙述. 5.其结构如图所示 6.设置页面交互,在home页面设置交互页面,新增用例1,如图所示 7.预览即可得到文字滚动效果

兼容性不错的文字滚动特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

网页文字竖排的几种实现方式

古时候的书籍里面文字的书写方式都是从上到下从右向左书写的,我们可不可以在网页上实现这种文字排版效果,虽然现在竖排在网页上用的比较的少,但是我们可以在我们自己的个人网站或者博客介绍页面用竖排来排版,使网页样式看起来更加的丰富和复古! 通过一些尝试我找到了如下3中方式在网页上竖排文字的方法,各有各的缺点和优点,下面我们就来看看具体的方法和实现效果吧! 方式1.css属性float实现文字竖排# 实现原理:把一短话的每一句放在一个div中,设置div的宽度和要显示的字体的大小一样(div的高度=字数×