Marquee 文字轮播的使用参数详解

Marquee滚动总结

一、Marquee详解

1、Marquee经常用到的两个事件

onMouseOut="this.start()";用来设置鼠标移除出区域时继续滚动；

onMouseOver=“this.stop()”;用来设置鼠标移入该区域时停止滚动.

2、Marquee向左滚动(缺陷不能实现无缝滚动)

<marguee scrollAmount=3 width=900 style="color:#FF0000;font-size:12px; align="texttop" height="14">第二期网上开店免费培训课程将在经七纬一济南日报大厦20楼会议室举行,如果你想通过网络实现创业梦想请拨打咨询电话:0531-82886496预约课程! "；

3、向上滚动

例子：<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>

（1）align:设定<marquee>标签内容的对齐方式

absbottom:绝对底部对齐

absmiddle:绝对中央对齐

baseline:底线对齐

bottom:底部对齐

left:左对齐

middle:中间对齐

right:右对齐;

texttop:顶线对齐

top:顶部对齐

指整个Marquee对齐方式;

(2)behavior:设置滚动的方式：

scroll：表示由一端滚动到另一端，会重复,缺陷是不能无缝滚动。

slide:表示由一段滚动到另一端，不会重复.

alternate:表示在两端之间来回滚动。

（3）bgcolor:设定活动字幕的背景颜色，背景颜色可用RGB、16进制格式或颜色名称来设定。

（4）设定活动字幕的滚动方向

设定活动字幕的滚动方向用direction属性

滚动方向分为：down、left、right、up。

（4）height、width活动字幕高度、宽度。

（5）hspace 设定活动字幕里所在的位置距离父容器水平边框的距离（增大距离向左移动）

vspace
设定活动字幕里所在的位置距离父容器垂直边框的距离(增大距离向下移动)

(6)loop设置滚动的次数默认为-1会一直滚动下去。

（7）scrollamount设置滚动字母的速度

设定活动字幕的滚动速度

（8）scrolldelay：设定活动字幕滚动的两次之间的延长时间。（单位毫秒）

Marquee 文字轮播的使用参数详解相关推荐

html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
axure轮播图怎么设置循环轮播_Axure教程：轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
php轮播插件,移动端h5轮播插件swipe实例详解
swipe.js是一个轻量级js触摸滑动类库 – Swipe JS.这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且 ...
html焦点图自动轮播,JS实现焦点图轮播效果的方法详解
本文实例讲述了JS实现焦点图轮播效果的方法.分享给大家供大家参考,具体如下: 效果图如下: 一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 ...
图片轮播的实现（详解两种方法）
今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式.(图片我放在文末了) 当然也有更复杂的图片,也会 ...
android banner 广告,Android convinientbanner顶部广告轮播控件使用详解
本文实例为大家分享了convinientbanner顶部广告轮播控件的具体代码,供大家参考,具体内容如下 gradle中添加 compile 'com.bigkoo:convenientbanner: ...
最简洁,最全面的vue2.0实现轮播图实战教程详解
因为最近在做一个积分奖励项目,首页要做一个轮播图,正好借这这次机会把本次使用vue2.0实现轮播图的详细过程分享出来. 废话不多说,先来个效果图(备注:图片是临时在网上找的,各位关注轮播图效果即可): ...
简单的图片、文字轮播，及切换动画
图片轮播使用的容器是ViewPager,文字轮播使用的是TextSwitcher. 图片轮播的主要思路:利用Timer和TimerTask构建定时任务:监听ViewPager的滑动,根据滑动百分比动态 ...
html图片与文字轮播,我是这样写文字轮播的
原标题:我是这样写文字轮播的作者:一半水一半冰原文:http://www.cnblogs.com/jingh/p/6377736.html 1写在前面最近总结下之前的工作,才恍然发现时间的流逝永 ...

Marquee 文字轮播的使用参数详解

Marquee 文字轮播的使用参数详解相关推荐

最新文章

热门文章