HTML中的marquee标签实现滚动效果
一、标签<marquee>简介
通过开始标签<marquee>和结束标签</marquee>的共同配合而实现滚动效果,<marquee>滚动的内容</marquee>,滚动内容可以是超链接、图片、文字或者表格。
二、标签属性
1.behavior 行为属性有三个值 alternate、scroll、slide
- alternate 来回交替滚动(方向属性对此不做限制)<marquee behavior="alternate">滚动内容</marquee>
- scroll 循环滚动默认效果
- slide 只滚动一次就停止
2.direction 方向属性有四个值 up、down、right、left
- 例如:up 自下往上 <marquee direction="up">滚动内容</marque>
3.scrollamount 滚动速度,即每次滚动时候的长度,以像素(pixel)为单位
- 例如<marquee scrollamount="4">滚动内容</marquee>
4.scrolldelay 滚动的时间间隔,单位是毫秒(1秒=1000毫秒)
- 例如<marquee scrolldelay="1000">滚动内容</marquee>
5.width、height 分别是 滚动区域的宽度和高度
- 例如<marquee width="300" height="100">滚动内容</marquee>
6.bgcolor 设置滚动区域的背景颜色,可以直接设置颜色英文(blue),也可以是十六进制颜色(#ff00ff)
- 例如<marquee bgcolor="#ff0000 / blue">滚动内容</marquee>
7.hspace、vspace 空白空间
- hspace设定活动字幕所在位置距离父容器水平边框的距离 horizontal(水平) space
- vspace设定活动字幕所在位置距离父容器垂直边框的距离 vertical(垂直) space
- 例如<marquee hspace="20" vspace="40">滚动内容</marquee>
8.loop 设定滚动的次数,当loop=-1时,表示一直滚动下去,默认值为-1
- 例如<marquee loop="-1">一直滚动下去</marquee> <marquee loop="2">只滚动两次</marquee>
三、事件
1.onMouseOut="this.start()" 表示当鼠标移开时开始滚动
2.onMouseOver="this.stop()" 表示当鼠标移入该区域时停止滚动
- 例如 <marquee onMouseOut="this.start()" onMouseOver="this.stop()" width="222" height="222">滚动内容</marquee>
- (涉及到一个驼峰命名法的规则)
四、示例代码
1.滚动一个超链接
<marquee><a href="http://baidu.com"></a></marquee>
2.滚动一个图片
<marquee><img src="1.jpg"></marquee>
3.一个完整的滚动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>滚动</title>
</head>
<body>
<marquee behavior="alternate" direction="right" width="300" height="100" bgcolor="#ff00ff" scrollamount="50" scrolldelay="1000" hspace=50 vspace=50 onmouseover="this.stop()" onmouseout="this.start()" loop="2">滚动内容
</marquee>
</body>
</html>
参考:叶落无痕123 https://blog.csdn.net/u012767761/article/details/75142470
HTML中的marquee标签实现滚动效果的更多相关文章
- html的<marquee></marquee>标签实现滚动效果
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用m ...
- 2016/2/26 <marquee></marquee>实现多种滚动效果
页面的自动滚动效果,可由javascript来实现,但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记 ...
- marquee 标签 文字滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android源码分析(十二)-----Android源码中如何自定义TextView实现滚动效果
一:如何自定义TextView实现滚动效果 继承TextView基类 重写构造方法 修改isFocused()方法,获取焦点. /* * Copyright (C) 2015 The Android ...
- repeater控件 + marquee标签 实现文字滚动显示
各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...
- antd源码分析之——标签页(tabs 3.Tabs的滚动效果)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第三部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- HTML标签marquee实现滚动效果
html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...
- JS魔法堂:通过marquee标签实现信息滚动效果
一.前言 有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...
- IE8中marquee不显示出滚动效果的解决办法
随着各种软件的升级,我们系统中的IE6也渐渐被淘汰了,目前主流的浏览器一半的用户已经从IE6直接升级到了IE8,虽然给用户更好的体验,上网更快更方便了,但是对网站制作来说,又是个比较麻烦的问题,因为很 ...
随机推荐
- 6.824 Lab 2: Raft 2A
6.824 Lab 2: Raft Part 2A Due: Feb 23 at 11:59pm Part 2B Due: Mar 2 at 11:59pm Part 2C Due: Mar 9 at ...
- 那些搜过很多遍的python基础知识
一. DataFrame 相关 1 索引的使用(.loc[] .iloc[]) .loc用行列标签来选择数据..iloc 根据行数与列数索引. import pandas as pd data = p ...
- django 的 三个 时间 字段
- Java第一周总结
通过两周的Java学习最深刻的体会就是Java好像要比C要简单一些. 然后这两周我学习到了很多东西,李老师第一次上课就给我们介绍了Java的发展历程,同时还有Java工具jdk的发展历程. Java语 ...
- Redis进阶:Redis的哨兵模式搭建
Redis进阶:Redis的哨兵模式搭建 哨兵机制介绍 单机版的Redis存在性能瓶颈,Redis通过提高主从复制实现读写分离,提高了了Redis的可用性,另一方便也能实现数据在多个Redis直接的备 ...
- ubuntu 虚拟机安装
ubuntu16.04.5 LTS 安装 1.下载ubuntu镜像 打开ubuntu官网镜像地址https://launchpad.net/ubuntu/+cdmirrors 在上面中搜索chin ...
- Luogu p1241 括号序列
括号序列题目连接 这是一道与dp毫无半点关系的题 本来是去找的题来着,结果并没有找到,然后看到了这道题. (本来以为会是很好写的一道题结果因为题意不清直接原地去世了) 思路很简单,基本没有技术含量. ...
- stringstream istringstream ostringstream 三者的区别
stringstream istringstream ostringstream 三者的区别 说明 ostringstream : 用于执行C风格字符串的输出操作. istringstream : 用 ...
- Codeforces 1255F Point Ordering(凸包+叉积)
我们随机选取点1,2作为凸包的一个分割线,那么我们可以直接枚举剩下n-2个点找到他们和向量1-2的叉积大小与正负,然后我们可以根据叉积的正负,先将他们分割出两个区域,在向量1-2的下方还是上方,接下来 ...
- set(详解)
1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...