hello

HTML标签<marquee>实现滚动效果

marquee(文字滚动)标签

marquee简介

语法:<marquee>...</marquee>;

说明:在标记之间添加要进行滚动的内容。

使用marquee标记不仅可以移动文字,也可以移动图片,表格等.

<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等,它们都是可选的。

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

  语法:<marquee direction="滚动方向">...</marquee>

值可以是left,right,up,down,默认为left

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

  语法:<marquee behavior="滚动方式">...</marquee>

值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)

注意

如果在<marquee>标签中同时出现了direction和behavior属性,那么scroll和slide的滚动方向将依照direction属性中参数的设置。

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

  语法:<marquee scrollamount="5">...</marquee>

值是正整数,默认为6

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

  语法:<marquee scrolldelay="100">...</marquee>

值是正整数,默认为0,单位是毫秒

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

  语法:<marquee loop="2">...</marquee>

值是正整数,默认为无限循环

6.滚动范围width、height

决定滚动文字在页面中的矩形范围大小。这两个属性的参数值可以是数字或者百分数,数字表示矩形所占的(宽或高)像素点数,百分数表示矩形所占浏览器窗口的(宽或高)百分比。

值是正整数(单位是像素)或百分数

7.滚动背景颜色bgcolor

参数值是16进制(形式:#AABBCC或#AA5566等)或预定义的颜色名字(如red、yellow、blue等)。

值是16进制的RGB颜色,默认为白色

8.空白空间hspace、vspace

这两个属性决定滚动矩形区域距周围的空白区域.

值是正整数,单位是像素

9.align属性

这个属性决定滚动文字位于距形内边框的上下左右位置。

值可以是top,middle,bottom,默认为middle

注意

您也可以将<marquee>和</marquee>之间的内容替换为图像或其它对象等功能。

10.οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div>
<marquee direction="left" 
         behavior="scroll" 
         scrollamount="10" 
         scrolldelay="0" 
         loop="-1" 
         width="1000" 
         height="50" 
         bgcolor="#0099FF"
         hspace="10" 
         vspace="100"
         onmouseover=this.stop() onmouseout=this.start()>
指整个Marquee对齐方式; 
    (2)behavior:设置滚动的方式: 
    scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。
    slide:表示由一段滚动到另一端,不会重复...
</marquee>
</div>
</body>
</html>

 





posted @ 2022-07-12 11:20  老故  阅读(2618)  评论(0编辑  收藏  举报