博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页文字滚动的实现
阅读量:4619 次
发布时间:2019-06-09

本文共 1381 字,大约阅读时间需要 4 分钟。

     在许多网站中,都会包含滚动文字的特效,这些特效也可以称为走马灯特效,比如一些网站中的新闻公告。本实例将介绍如何在网页中实现滚动文字。运行本实例,如图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>

 

转载于:https://www.cnblogs.com/zkn11199/p/5550909.html

你可能感兴趣的文章
开发时用于文件前说明
查看>>
查询练习(45道题)
查看>>
防盗链
查看>>
期末作品检查
查看>>
.NET中的三种Timer的区别和用法(收集)
查看>>
自动更新本地 GIT 仓库
查看>>
Python——pyiso8601
查看>>
java.lang.UnsupportedClassVersionError
查看>>
实现接口必须要加注解@Override吗
查看>>
apicloud UISearchBar 使用方法
查看>>
【spring+websocket的使用】
查看>>
MinGW 环境下 给hello.exe 自定义一个图标
查看>>
HTTP状态码
查看>>
数据类型和数据类型转换
查看>>
插入排序
查看>>
大数据学习——akka学习
查看>>
python中 的继承
查看>>
cocos2d内存管理,类的生命周期
查看>>
mysql生成数据字典
查看>>
fstream
查看>>