html滚动代码marquee标签熟悉滚动代码大全上下左右(跑马灯效果)

使用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

滚动方向
<marquee direction="left">从右向左滚动</marquee>
<marquee direction="right">从右向右滚动</marquee>
<marquee direction="up">从右向上滚动</marquee>
<marquee direction="down">从右向下滚动</marquee>

鼠标属性
<marquee onMouseOut="this.start()" >鼠标移出状态滚动</marquee>
<marquee onMouseOver="this.stop()" >鼠标经过时停止滚动</marquee>

滚动方式
<marquee behavior="scroll">一圈一圈绕着滚动</marquee>
<marquee behavior="slide">只走一圈就不滚动了</marquee>
<marquee behavior="alternate">左右来回滚动</marquee>

循环次数
<marquee loop="3">只滚动3次</marquee>

速度与延时
<marquee scrolldelay="20" scrollamount="2">滚动速度可以自己修改数值调试</marquee> 
注释:scrollamount=速度 、 scrolldelay=延时

空白(间距)
<marquee hspace="10" vspace="40">这2个属性类似padding样式</marquee> 
注释:hspace=左右间距 、 vspace=上下间距

背景颜色
<marquee bgcolor="#FFFFFF">白色背景</marquee>

面积尺寸
<marquee width="50%" height="30">宽50%,高30像素</marquee>

以上就是marquee常用属性,使用时把你需要的参数组合起来就可以了。

完整代码
<marquee direction="left" width="50%" height="30" onMouseOut="this.start()" onMouseOver="this.stop()" behavior="scroll" scrolldelay="20" scrollamount="2">Marquee属性代码来自:佳帅个人博客http://www.xiaominjia.com </marquee>

时间: 2024-08-09 15:17:52

html滚动代码marquee标签熟悉滚动代码大全上下左右(跑马灯效果)的相关文章

TextView标签的属性和跑马灯效果

text:显示的内容 textSize:文本的大小 textColor:文本的颜色 visibility:可见性  默认可见,invisible:表示不可见,但对控件的显示区域做了保留 gone:隐藏控件当前控件显示的区域不做保留 autoLink:表示当前TextView的链接类型,值为“phone,web,email.....” TextView跑马灯效果 android:singleLine="true"  单行显示 android:ellipsize="marquee

转:HTML中让图片滚动的&lt;marquee&gt;标签的使用方法

实例: <marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scr

Android TextView 横向滚动(跑马灯效果)

Android TextView 中当文字比较多时希望它横向滚动显示,下面是一种亲测可行的方法. 效果图: 1.自定义TextView,重写isFocused()方法返回true,让自定义TextView一直处于获取焦点状态. package com.example.shen.marqueedemo; import android.content.Context; import android.util.AttributeSet; import android.widget.TextView;

IOS跑马灯效果,实现文字水平无间断滚动

ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController{ 4 NSTimer *timer; 5 UIScrollView *scrollViewText; 6 } 7 8 @property (nonatomic ,strong) NSArray *arrData; 9 10 11 @end ViewController.m 1 // 2 // ViewContro

android TextView实现跑马灯效果(字体滚动)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" androi

html单个标签实现跑马灯效果

<marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要有behavior.bgcolor.direction.width.height.hspace.vspace.loop.scrollamount.scrolldelay等,它们都是可选的. behavior属性 behavior属性的参数值为alternate.scroll.slide中的一个,分别表示文字来

HTML滚动文字代码 marquee标签

    <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" ><div align="left" ><br /></div ><center ><font face="黑体" color="#008000" size=&q

vue制作滚动条幅-跑马灯效果实例代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body>

Android textView点击滚动(跑马灯)效果

布局文件: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 and