HTML标签marquee实现滚动效果

原文:HTML标签marquee实现滚动效果

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

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

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

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

  语法:<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

  语法:<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

  语法:<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

  语法:<marquee scrolldelay="100">...</marquee>

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

  语法:<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div>
<marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...
</marquee>
</div>
</body>
</html>

 

时间: 2024-09-19 23:58:33

HTML标签marquee实现滚动效果的相关文章

JS与HTML结合使用marquee标签实现无缝滚动效果代码_javascript技巧

具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>一行多列文字循环滚

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

一.前言     有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅.   二. marquee标签 的基础知识 示例: <marquee behavior="scroll" direction="left" loop="-1" scrollAmount="12" scrollDelay=&

分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>分别用marquee

JQuery插件Marquee.js实现无缝滚动效果_jquery

Marquee.js插件提供了许多属性选项,您可以配置定制外观和效果. { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000 // 滚动完到下一条的间隔时间 pauseOnHover: true // 鼠标滑向文字时是否停止滚动 loop: -1 // 设置循环滚动次

jQuery实现平滑滚动的标签分栏切换效果_jquery

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g

Java基于线程实现带有滚动效果的Label标签实例_java

本文实例讲述了Java基于线程实现带有滚动效果的Label标签.分享给大家供大家参考.具体如下: import java.awt.Graphics; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; /** * Java中用线程实现带有滚动效果的Label标签 */ public class Test extends JFrame { private static final long

jQuery模拟Marquee实现无缝滚动效果完整实例_jquery

本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di

HTML之marquee(文字滚动)详解

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

jquery滚动组件(vticker.js)实现页面动态数据的滚动效果

本文为大家想你想介绍下jquery实现页面动态数据的滚动效果.似乎只有通过div-ul-li标签嵌套的方式才能实现表格多行多列的滚动效果   复制代码 代码如下: <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script> <script language="javascript" src="lirms/Test/vtic