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,虽然给用户更好的体验,上网更快更方便了,但是对网站制作来说,又是个比较麻烦的问题,因为很 ...
随机推荐
- 我在DBGridEh增加一栏复选框及对应操作的解决方案
最近客户有个需求,要求对单据列表里指定的单据进行批量审核,很自然的,我想到了在DBGridEh增加一栏复选框的列,审核时遍历所有单据,将打了勾的单据审核就可以了.查阅了网上很多文章,不外有2个方案,1 ...
- centos7安装java JDK
Java环境 1.下载jdk(用FileZilla或xshell工具连接服务器后上传到需要安装的目录) 在 /opt/deploy 下新建 java 文件夹: # mkdir / opt/deploy ...
- PHPFPM模式三种运行模式
1.static模式 static模式始终会保持一个固定数量的子进程,这个数量由pm.max_children定义. 2.dynamic模式 子进程的数量是动态变化的,启动时,会生成固定数量的子进 ...
- Spring Task 任务调度(定时器)
1.任务调度SpringTask 1.1什么是任务调度 在企业级应用中,经常会制定一些“计划任务”,即在某个时间点做某件事情,核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作.常见的 ...
- Highways POJ-1751 最小生成树 Prim算法
Highways POJ-1751 最小生成树 Prim算法 题意 有一个N个城市M条路的无向图,给你N个城市的坐标,然后现在该无向图已经有M条边了,问你还需要添加总长为多少的边能使得该无向图连通.输 ...
- sudo pip install -i http://pypi.douban.com/simple/ --trusted-host=pypi.douban.com/simple ipython
sudo pip install -i http://pypi.douban.com/simple/ --trusted-host=pypi.douban.com/simple ipython
- 有序无序ul->li ol->li菜单,默认点击当前弹出下拉,再次点击收起下拉菜单
实现这一效果利用css和js技术结合 以ul->li为例子 <!DOCTYPE html><html lang="en"><head> & ...
- 权限控制(vue)
权限控制(vue) 经常会遇到,角色权限控制问题,若是页面控制,倒好说,可如果是当前页面部分可见不可见,这就有些麻烦,如果加上条件就更加苛刻.之前只是简单的v-if进行控制,如今想试试指令(网上一直有 ...
- 00.AutoMapper 之入门指南(Getting Started Guide)
转载(https://www.jianshu.com/p/29ee5a94c1d9) 入门指南(Getting Started Guide) AutoMapper 是什么? AutoMapper 是一 ...
- 富文本编辑器Ueditor
一.大概使用: 官网:http://ueditor.baidu.com/website/download.html 使用:[参考index.html] 3.1 引入ueditor的js <scr ...