一、标签<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标签实现滚动效果的更多相关文章

  1. html的<marquee></marquee>标签实现滚动效果

    页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用m ...

  2. 2016/2/26 <marquee></marquee>实现多种滚动效果

    页面的自动滚动效果,可由javascript来实现,但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记 ...

  3. marquee 标签 文字滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Android源码分析（十二）-----Android源码中如何自定义TextView实现滚动效果

    一:如何自定义TextView实现滚动效果 继承TextView基类 重写构造方法 修改isFocused()方法,获取焦点. /* * Copyright (C) 2015 The Android ...

  5. repeater控件 + marquee标签 实现文字滚动显示

    各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...

  6. antd源码分析之——标签页（tabs 3.Tabs的滚动效果）

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第三部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  7. HTML标签marquee实现滚动效果

    html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标记不仅可以移动文字,也可以移动图片,表格等.只需要在<ma ...

  8. JS魔法堂：通过marquee标签实现信息滚动效果

    一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. ...

  9. IE8中marquee不显示出滚动效果的解决办法

    随着各种软件的升级,我们系统中的IE6也渐渐被淘汰了,目前主流的浏览器一半的用户已经从IE6直接升级到了IE8,虽然给用户更好的体验,上网更快更方便了,但是对网站制作来说,又是个比较麻烦的问题,因为很 ...

随机推荐

  1. 使用cesium中的scene.open中遇到的几个问题

    有些服务是发在场景(scene)下的,超图提供了一个很方便的方法:scene.open,这个方法会将场景中所有的图层(无论是OSGB还是影像和地形)加载进来.同时这个方法会自带一个自动地位功能,具体实 ...

  2. 【MM系列】SAP 财务帐与后勤不一致情况

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 财务帐与后勤不一致情况   ...

  3. UrlConnection发送http请求 中文乱码解决

    中文乱码 DataOutputStream dos = new DataOutputStream(httpConn.getOutputStream()); //dos.writeBytes(jsonD ...

  4. kubeadm初始化kubernetes集群

    有两种方式安装集群: 1.手动安装各个节点的各个组件,安装极其复杂困难. 2.使用工具:kubeadm kubeadm 是官方提供的专门部署集群的管理工具. 1. 在kubeadm下每个节点都需要安装 ...

  5. 极*Java速成教程 - (4)

    Java语言基础 多态 多态是面向对象的一大重要特性,如果说封装是隐藏一个类怎么做,继承是确定一系列的类做什么,那多态就是通过手段去分离做什么和怎么做. 向上转型与收窄 在开发者将一类事物封装成类以后 ...

  6. Java Springboot 根据图片链接生成图片下载链接 及 多个图片打包zip下载链接

    现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题, ...

  7. 2019.07.06 纪中_B

    今天的题看起来都很简单,结果就爆炸了 做题时:怎么都是图论??? 结果最后好多是DP(最恐怖的是还有我没学过的状压DP) 2019.07.06[NOIP提高组]模拟 B 组 做了两题(稍微腐败了一下) ...

  8. echarts markLine 辅助线非直线设置

    效果图: 用例option: option = { title: { text: '未来一周气温变化', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' } ...

  9. 一分钟搭建 Web 版的 PHP 代码调试利器

    一.背景   俗话说:"工欲善其事,必先利其器".作为一门程序员,我们在工作中,经常需要调试某一片段的代码,但是又不想打开繁重的 IDE (代码编辑器).使用在线工具调试代码有时有 ...

  10. 细说C#的ReferenceEquals，Equals和==比较运算符

    C# 中有两种不同的相等:引用相等和值相等.值相等是大家普遍理解的意义上的相等:它意味着两个对象包含相同的值.例如,两个值为 2 的整数具有值相等性.引用相等意味着要比较的不是两个对象,而是两个对象引 ...