marquee:

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

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

　　语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。

代码展示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{margin:0px;padding:0px;text-decoration:none;}

            .marquee{width:500px;height:40px;border:1px solid #ccc;margin:100px auto;font-size:20px;line-height:40px;}

        </style>

    </head>

    <body>

        <div class="marquee">

            <marquee direction="right" height="40" scrollamount="5" loop="-1" behavior="alternate" onmouseover="stop();" onmouseout="start();"><a href="###">内容啊实打实大师大声大声道</a></marquee>

        </div>

    </body>

</html>

效果展示：

知识点总结：

　　一.支持两个事件：

onmouseover="this.start()" ：用来设置鼠标移入该区域时停止滚动；
           onmouseout="this.stop()"：用来设置鼠标移出该区域时继续滚动；

　　二.支持属性

　　　　1.align：设定<marquee>标签内容的对齐方式
                        absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
                        absmiddle：绝对中央对齐
                        baseline：底线对齐
                        bottom：底部对齐（默认）
                        left：左对齐
                        middle：中间对齐
                        right：右对齐
                        texttop：顶线对齐
                        top：顶部对齐

　　　　2.behavior：设定滚动的方式
                        alternate： 表示在两端之间来回滚动。
                        scroll： 表示由一端滚动到另一端，会重复。
                        slide：  表示由一端滚动到另一端，不会重复。

　　　　3.direction：设定活动字幕的滚动方向（down,up,left,right）;

　　　　4.height:设定活动字幕的高度;

　　　　5.width:设定活动字幕的宽度;

　　　　6.hspace:设定活动字幕里所在的位置距离父容器水平边框的距离;

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

8.loop:设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1;

9.scrollamount:设定活动字幕的滚动速度，单位pixels;

10.scrolldelay:设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）

扩展：

　　仿marquee

　　　　

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>

    <style>

        .marquee {

          margin:100px auto;

          height: 30px;

          width: 420px;

          border:1px solid red;

          overflow: hidden;

        }

        .marquee div {

          display: block;

          width: 100%;

          height: 30px;

          line-height:30px;

          overflow: hidden;

          animation: marquee 5s linear infinite alternate;

          text-align: right;

        }

        @keyframes marquee {

          0% {transform: translate(0px); }

          100% {transform: translate(-100%);}

        }

    </style>

  </head>

<body>

    <div class="marquee">

      <div>

        <span>世界这么大,我想去看看1</span>

      </div>

    </div>

  </body>

</html>

marquee的更多相关文章

  1. marquee上下左右循环无缝滚动代码

    一.横向滚动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "><HTML>< ...

  2. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  3. TextView属性android:ellipsize="marquee"不生效的解决办法

    最近自己在写自己的第一个app,过程中遇到了这个问题,查了不少帖子,经过尝试发现,这种问题一般分为两类: 1. TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <Te ...

  4. marquee标签，好神奇啊...

    <html><body><div style="height:190; margin-top:10; margin-bottom:10; width:96%; ...

  5. Marquee 滚动参数

    new marquee("Layer3", 2, 1, 989, 68, 20, 0, 0, 238); 参数说明:Layer3 :容器ID 2 :向上滚动(0向上 1向下 2向左 ...

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

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

  7. marquee 标签 文字滚动

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

  8. marquee标签实现页面内容的滚动效果

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

  9. marquee 实现首尾相连循环滚动效果

    <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等  marquee标签不是HTML3.2 ...

  10. 一个不陌生的JS效果-marquee,用css3来实现

    关于marquee,就不多说了,可以戳这里. 毕竟他是一个很古老的元素,现在的标准里头也不推荐使用这个标签了.但平时一些项目中会经常碰到这样的效果,每次都是重新写一遍,麻烦! JS类实现marquee ...

随机推荐

  1. Chromium Graphics: Graphics and Skia

    Graphics and Skia Chrome uses Skia for nearly all graphics operations, including text rendering. GDI ...

  2. caioj 1080 动态规划入门（非常规DP4：乘电梯）(dp数组更新其他量)

    我一开始是这么想的 注意这道题数组下标是从大到小推,不是一般的从小到大推 f[i]表示从最高层h到第i层所花的最短时间,答案为f[1] 那么显然 f[i] = f[j] + wait(j) + (j ...

  3. unity 5.6.1 Oculus手柄输入问题

    unity文档中提到 轴的 ID 是5和6,但是测试后发现,ID是6和7,很坑 void Update () { if (Input.GetKeyDown(KeyCode.JoystickButton ...

  4. 转载-- Qt Creator编译时make： arm-linux-g++: command not found 错误！

    前提是已经配置好交叉编译器,但是qt creator找不到. 解决方法: 修改 /usr/local/Trolltech/QtEmbedded-4.7.0-arm/mkspecs/qws/linux- ...

  5. SpringMVC拓展

    ### 原生SpringMVC有如下缺陷 参数的JSON反序列化只支持@RequestBody注解,这意味着不能在controller方法中写多个参数,如下代码是不对的 public Map test ...

  6. Looger级别

    Logger级别 日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level).日志记录器(Logger)的可用级别Level (不包括自定义级别 Level), 以下内容 ...

  7. CheckBox:屏蔽setChecked方法对OnCheckedChangeListener的影响

    对于CheckBox的OnCheckedChangeListener,有两种情况下会被触发: (1)用户点击了一下CheckBox: (2)代码中调用了setChecked(boolean check ...

  8. XMPP使用简单介绍--登录

    在现阶段的通信服务中,各种标准都有.因此会出现无法实现相互连通,而XMPP(Extensible Message and presence Protocol)协议的出现,实现了整个及时通信服务协议的互 ...

  9. Ubuntu系统下的Mysql安装与使用

    摘要 在本篇博文中.笔者将从基础出发.介绍Mysql在Linux环境下的安装和基本使用命令,仅适用于Mysql刚開始学习的人.大牛请绕道-- 安装Mysql数据库 这里介绍最最简单的安装方式,至于编译 ...

  10. BZOJ1306: [CQOI2009]match循环赛

    [传送门:BZOJ1306] 简要题意: 有n个队伍,每个队伍都要和其他队伍比一场,赢了的队得3分,输了的队不得分,打平两队各得一分,给出每个队伍的得分,求出对战方案数 题解: DFS暴搜!!一眼就觉 ...