网站链接: ngui
当前位置: 首页 > 学习教程  > 互联网媒体

html-marquee详解

2020/12/20 17:37:32 人评论 文章标签: marquee

该标签不是HTML3.2的一部分&#xff0c;并且只支持MSIE3以后内核&#xff0c;所以如果你使用非IE内核浏览器(如&#xff1a;Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法&#xff1a; <marquee></marquee>以下是一个最简单的例子&#xff1…

该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果
该标签是个容器标签
语法:
<marquee></marquee>

以下是一个最简单的例子:

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

代码如下:
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动</marquee>
 
这是一个完整的例子:

代码如下:
<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
这是一个完整的例子
</marquee>
 

该标签支持的属性多达11个:
 

align 设定<marquee>标签内容的对齐方式

absbottom:绝对底部对齐(与g、p等字母的最下端对齐)
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐

代码如下:
<marquee align="absbottom">align="absbottom":绝对底部对齐(与g、p等字母的最下端对齐)。 </marquee>
<marquee align="absmiddle">align="absmiddle": 绝对中央对齐。 </marquee>
<marquee align="baseline">align="baseline": 底线对齐。 </marquee>
<marquee align="bottom">align="bottom": 底部对齐(默认)。 </marquee>
<marquee align="left">align="left": 左对齐。 </marquee>
<marquee align="middle">align="middle": 中间对齐。 </marquee>
<marquee align="right">align="right": 右对齐。 </marquee>
<marquee align="texttop">align="texttop": 顶线对齐。 </marquee>
<marquee align="top">align="top": 顶部对齐。 </marquee>
 

behavior  设定滚动的方式:

alternate: 表示在两端之间来回滚动。
scroll: 表示由一端滚动到另一端,会重复。
slide:  表示由一端滚动到另一端,不会重复。
代码如下:
<marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee>
<marquee behavior="slide">slide:  表示由一端滚动到另一端,不会重复。</marquee>
 

bgcolor  设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。

代码如下:
<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>
 

direction 设定活动字幕的滚动方向
代码如下:
<marquee direction="down">设定活动字幕的滚动方向direction="down":向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向direction="left":向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向direction="right":向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向direction="up":向上</marquee>
 

height 设定活动字幕的高度
代码如下:
<marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>
 

width 设定活动字幕的宽度
代码如下:
<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>
 
hspace 设定活动字幕里所在的位置距离父容器水平边框的距离
This controls the horizontal(水平)space around the display box.
代码如下:
  <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
    </tr>
  </table>
 

vspace 设定活动字幕里所在的位置距离父容器垂直边框的距离

This controls the vertical(垂直) space around the display box.
代码如下:
<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>
 
loop 设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

代码如下:
<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>
 

scrollamount 设定活动字幕的滚动速度,单位pixels

代码如下:
<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>
 

scrolldelay 设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)
值大了会有一步一停顿的效果
代码如下:
<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>
本文链接: http://www.dtmao.cc/news_show_10349.html

附件下载

相关教程

  • html-marquee详解

    该标签不是HTML3.2的一部分&#xff0c;并且只支持MSIE3以后内核&#xff0c;所以如果你使用非IE内核浏览器(如&#xff1a;Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法&#xff1a; <marquee></marquee>以下是一个最简单的例子&#xff1…

    2020/12/20 17:37:32
  • 文字滚动标签marquee

    marquee Marquee是html的标签&#xff0c;所有的主流浏览器都能兼容&#xff0c;用于创建文字滚动。 滚动方向 direction <!--滚动方向 direction 4个值 up down left right 默认从右向左--> <marquee direction"up">我想上滚动</marquee>滚动方…

    2020/12/20 17:37:31
  • 跑马灯 marquee

    1 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>跑马灯效果</title><meta nameviewport content"widthdevice-width,initial-scale1"><script src"https://www.jq22.com/jquery/vue.min.…

    2020/12/20 17:37:30
  • HTML之marquee标签详解

    marquee标签详解 marquee语法:<marquee></marquee>实例一<marquee>Hello, World</marquee>marquee常用到的两个事件&#xff1a;onMouseOut"this.start()" 当鼠标移出该区域时onMouseOver"this.stop()" 当鼠标移入该区域时实例二&…

    2020/12/20 17:37:29
  • html之marquee详解

    该标签不是HTML3.2的一部分&#xff0c;并且只支持MSIE3以后内核&#xff0c;所以如果你使用非IE内核浏览器(如&#xff1a;Netscape)可能无法看到下面一些很有意思的效果 该标签是个容器标签 语法&#xff1a; <marquee></marquee>以下是一个最简单的例子&#xf…

    2020/12/20 17:37:28
  • 微信小程序marquee

    https://www.jianshu.com/p/0ff03e5e942e 发现点问题&#xff0c;setdata方法放在create&#xff08;&#xff09;里面获取不到真正的length长度&#xff0c;要放在attached()或者ready()&#xff1b;

    2020/12/20 17:37:27
  • marquee标签详解

    <marquee>标签&#xff0c;它是成对出现的标签&#xff0c;首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等&…

    2020/12/20 17:37:26
  • vue marquee原生实现

    <template> <div class"index"> <div class"scroll"> <ul :style"{top}" :class"{transition:index!0}"> <li v-for"item in list" click"hh">{{"第"item"条数据&q…

    2020/12/20 17:37:25
  • marquee标签

    作用: 跑马灯 格式&#xff1a; <marquee>内容</marquee> 属性: direction: 设置滚动方向 left/right/up/down scrollamount: 设置滚动速度, 值越大就越快 loop: 设置滚动次数, 默认是-1, 也就是无限滚动 behavior: 设置滚动类型 slide滚动到边界就停止, al…

    2020/12/20 17:37:24
  • html滚动标签marquee

    转自&#xff1a;https://www.cnblogs.com/jianmeng/p/7022288.html <marquee>标签&#xff0c;它是成对出现的标签&#xff0c;首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、…

    2020/12/20 17:37:21
  • marquee标签的使用

    <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>演示marquee</title><style type"text/css">*{padding: 0px;margin: 0px;}marquee{border: 1px solid purple;}img{width: 360px;height: auto;}&…

    2020/12/20 17:37:20
  • marquee跑马灯的替代方式

    随着H5的语义化&#xff0c;marquee标签逐渐被替代&#xff0c;后续可能浏览器不支持 这里介绍一下替代方式 实现位移的话&#xff0c;可以使用css3的transform配合过渡或者定时器 transition、transform、anmiation&#xff0c;使用css3的话&#xff0c;要考虑自己的应用场…

    2020/12/20 17:37:19
  • JS marquee div 层的操作

    写的非常好的一个marquee 在这里拿来与大家分享 Code/*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-01-31 (Ver 1.6) 更新说明: 加入功能 * 修正、完善 1.6.07013…

    2020/12/20 17:37:19
  • marquee通知滚动

    页面的自动滚动效果&#xff0c;可由javascript来实现&#xff0c;但是今天无意中发现了一个html标签 - <marquee></marquee>可以实现多种滚动效果&#xff0c;无需js控制。 使用marquee标记不仅可以移动文字&#xff0c;也可以移动图片&#xff0c;表格等. 语法&a…

    2020/12/20 17:37:17
  • Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一、npm 安装 如果你想安装插件&#xff08;自己写的&#xff09; 安装 # install dependencies npm i marquee-components使用 在main.js引入 import marquee from marquee-components Vue.use(marquee );在页面使用 <template><div id"app"><…

    2020/12/20 17:37:16
  • html实现Marquee无缝衔接

    html实现Marquee无缝衔接 以下是主要代码 <%--Created by IntelliJ IDEA.User: linDate: 2018/11/22Time: 10:56To change this template use File | Settings | File Templates. --%> <% page contentType"text/html;charsetUTF-8" language"java&q…

    2020/12/20 17:37:15
  • 实现marquee滚动效果

    背景&#xff1a;marquee标签在有些浏览器兼容性不好&#xff0c;就手动用原生js实现了下。横着滚动效果链接描述 <!doctype html> <html><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,in…

    2020/12/20 17:37:14
  • javascript模拟marquee跑马灯效果

    随着html中的标签marquee不在被W3C作为标准采纳&#xff0c;在可遇见的未来也会慢慢的被各大浏览器抛弃&#xff0c;直至废弃&#xff0c;为什么被废弃呢&#xff0c;经过小雨我不辞辛苦的总结有以下几种原因&#xff1a; marquee这家伙是微软自己创造出来的&#xff0c;现在火…

    2020/12/20 17:37:13
  • HTML之marquee(文字滚动)详解

    语法&#xff1a; <marquee></marquee> 以下是一个最简单的例子&#xff1a; 代码如下: <marquee><font size3 colorred>Hello, World</font></marquee> 下面这两个事件经常用到&#xff1a; onMouseOut"this.start()" &a…

    2020/12/20 17:37:13
  • marquee 详解

    转载&#xff1a;https://www.cnblogs.com/zmr2520/p/5307481.html marquee标签&#xff1a;创建 一个滚动的文章字幕&#xff0c;应用于文字、图片、表格 基本语法&#xff1a; <marquee>文字、图片代码、Flash动画代码和gif动态小代码</marquee> marquee标签…

    2020/12/20 17:37:12
  • HTML标签marquee实现滚动效果

    页面的自动滚动效果&#xff0c;可由javascript来实现&#xff0c;但是今天无意中发现了一个html标签 - 可以实现多种滚动效果&#xff0c;无需js控制。 使用marquee标记不仅可以移动文字&#xff0c;也可以移动图片&#xff0c;表格等. 语法&#xff1a;<marquee>...&…

    2020/12/20 17:37:11
  • 一个简单HTML标签marquee实现动态滚动条

    目录 标签效果 滚动条代码 标签属性详解 纵向滚动、横向滚动、深入浅出等都可实现 标签效果 滚动条代码 <!DOCTYPE html> <html> <head><title>滚动条标签展示</title> </head> <body><marquee directionleft behaviorscrol…

    2020/12/20 17:37:10
  • marquee 跑马灯

    js实现跑马灯 ------------------------------------------html----------------------------------------------- <p id"scrollobj" style"white-space:nowrap;overflow:hidden;width:300px;margin: auto;" onmouseover"jsStop()" onmouseo…

    2020/12/20 17:37:09
  • HTML中marquee介绍

    原文地址&#xff1a;http://www.cnblogs.com/tuyile006/archive/2007/03/28/691329.html 该标签不是HTML3.2的一部分&#xff0c;并且只支持MSIE3以后内核&#xff0c;所以如果你使用非IE内核浏览器(如&#xff1a;Netscape)可能无法看到下面一些很有意思的效果该标签是个容器…

    2020/12/20 17:37:08
  • marquee js

    https://www.bootcdn.cn/jQuery.Marquee/ htmlcss图片滚动&#xff1a;https://blog.csdn.net/OoO__0o0/article/details/52210432转载于:https://www.cnblogs.com/yijiaming/p/10995887.html

    2020/12/20 17:37:07
  • Flutter 自定义marquee垂直滚动

    自定义垂直marquee插件 用来向上垂直滚动列表&#xff08;一般滚动公告&#xff09; 自定义类&#xff1a; import dart:async;import package:flutter/material.dart;class Marquee extends StatefulWidget {final List<String> textList;final List<TextSpan> …

    2020/12/20 17:37:06

共有条评论 网友评论

验证码: 看不清楚?