html文字滚动_html滚动-程序员宅基地

技术标签: html  

HTML之marquee(文字滚动)详解
语法:

以下是一个最简单的例子:

代码如下:

Hello, World

下面这两个事件经常用到:

onMouseOut=“this.start()” :用来设置鼠标移出该区域时继续滚动

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

代码如下:

onMouseOut=“this.start()” :用来设置鼠标移出该区域时继续滚动 onMouseOver=“this.stop()”:用来设置鼠标移入该区域时停止滚动

这是一个完整的例子:

代码如下:

这是一个完整的例子

该标签支持的属性多达11个:

align

设定标签内容的对齐方式

absbottom:绝对底部对齐(与g、p等字母的最下端对齐)

absmiddle:绝对中央对齐

baseline:底线对齐

bottom:底部对齐(默认)

left:左对齐

middle:中间对齐

right:右对齐

texttop:顶线对齐

top:顶部对齐

代码如下:

align=“absbottom”:绝对底部对齐(与g、p等字母的最下端对齐)。

align=“absmiddle”: 绝对中央对齐。

align=“baseline”: 底线对齐。

align=“bottom”: 底部对齐(默认)。

align=“left”: 左对齐。

align=“middle”: 中间对齐。

align=“right”: 右对齐。

align=“texttop”: 顶线对齐。

align=“top”: 顶部对齐。

behavior

设定滚动的方式:

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

scroll: 表示由一端滚动到另一端,会重复。

slide: 表示由一端滚动到另一端,不会重复。

代码如下:

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

scroll:表示由一端滚动到另一端,会重复。

slide: 表示由一端滚动到另一端,不会重复。

bgcolor

设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。

代码如下:

设定活动字幕的背景颜色 bgcolor="#006699"

设定活动字幕的背景颜色 bgcolor=“rgb(10%,50%,100%,)”

设定活动字幕的背景颜色 bgcolor=“red”

direction

设定活动字幕的滚动方向

代码如下:

设定活动字幕的滚动方向direction=“down”:向下

设定活动字幕的滚动方向direction=“left”:向左

设定活动字幕的滚动方向direction=“right”:向右

设定活动字幕的滚动方向direction=“up”:向上

height

设定活动字幕的高度

代码如下:

设定活动字幕的高度height=“500”

width

设定活动字幕的宽度

代码如下:

设定活动字幕的宽度width=“500”

hspace

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

This controls the horizontal(水平)space around the display box.

代码如下:

  <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">

    <tr>

      <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>

    </tr>

  </table>

vspace

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

This controls the vertical(垂直) space around the display box.

代码如下:

hspace=“100”

loop

设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

代码如下:

我会不停地走。

 

我只走两次哦

scrollamount

设定活动字幕的滚动速度,单位pixels

代码如下:

scrollamount=“10”

scrollamount=“20”

scrollamount=“30”

scrolldelay

设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)

值大了会有一步一停顿的效果

代码如下:

scrolldelay=“10”

scrolldelay=“100”

scrolldelay=“1000”

移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

鼠标属性

onMouseOut=this.start() …鼠标移出状态滚动

onMouseOver=this.stop() …鼠标经过时停止滚动

方向

<direction=#> #=left, right ,up ,down 从右向左移!

方式

<bihavior=#> #=scroll, slide, alternate 一圈一圈绕着走!

只走一次就歇了!

来回走

循环

<loop=#> #=次数;若未指定则循环不止(infinite) 只走 3 趟

只走 3 趟

只走 3 趟!

速度

<scrollamount=#> 啦啦啦,我走得好快哟!

延时

<scrolldelay=#> 啦啦啦,我走一步,停一停!

外观(Layout)设置

对齐方式(Align)

<align=#> #=top, middle, bottom

啦啦啦,我会移动耶!

底色

<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 颜色!

面积

<height=# width=#> 面积!

空白

(Margins)<hspace=# vspace=#>

面积!

<marquee id=“iescroller” direction=left height=10 onMouseOut=start(); onMouseOver=stop(); scrollamount=2 scrolldelay=10 scrollleft=“0” scrolltop=“0” behavior=“alternate” bgcolor="#999999" style="color: #ffffff; font-size: 14; font-family: ‘宋体’, ‘Arial’,‘Helvetica’, ‘sans-serif’"title=文字内容> 这是放文字或需要移动的图片(光标放在这里时用INSERT命令就可以插入图片)

marquee的滚动属性参数

 从<marquee>开始到</marquee>结束,其中有很多参数,其实,朋友们还是应用得很多了,让图片滚动起来,也是经常经常应用的,下面对这个网页参数的属性做一些简单的描述;

滚动参数:

1:方向:DIRECTION

left—左(默认)

right—右

up------上

down----下

2:方式:BEHAVIOR

SCROLL -------环绕滚动(默认)

SLIDE---------滚动一次

ALTERNATE-----来回滚动

3:次数:LOOP

当LOOP=-1或LOOP=INFINITE时,则表明文字滚动是无限循环(默认)

4:速度:SCROLLDELAY

任意自然整数

5:对齐:ALIGN

TOP---------对齐上方

MIDDLE------对齐中部

BOTTOM------对齐下方

6:鼠标的划过与离开

onMouseOver=this.stop(); onMouseOut=this.start();

划过停止滚动。离开,继续滚动

有了以上参数。我们就很容易制作出一个logo图片的任意滚动方式,例如:

很容易对照出。这是一个滚动速度为120MM,从下到上碰壁即返回并对齐中间,鼠标划过图标即停止,点击图标进入〈千娇论坛〉的一个来回滚动的代码。

在背景图片上做滚动字幕

要滚动的文字

参数设置:

a)scrollAmount表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好

b)scrollDelay也是用来控制速度的,表示走走停停,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

c)direction很明显是表示滚动的方向,默认为从右向左:←,因此如果是向左滚动的话不需要次参数。其他可选的值还有right,down,up。滚动方向分别为:right表示→,up表示↑,down表示↓。

d)width和height用来表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

e)behavior是来控制滚动属性的,默认为循环滚动(scroll),同样,如果是循环滚动的话可以不需要此参数。其他可选的值还有alternate(交替滚动),slide(幻灯片效果,指的是滚动一次,然后停止滚动)。

f)每行字的前后用定义每行字的颜色,大小和字体,如果哪项不需要的话,把代码去掉就行。

图片滚动
的语句。并且要注意图片名不要中文,要注意区分英文大小写。

图片做超链接
用<a href=>和把包围,并且img必须设border=0,否则图片会出现蓝框。

正确的例子如:


其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FP或DW做网页的时候,要多查看源代码。

多张图片排列滚动
通常图片和图片之间用
(回行)或

(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到marquee中,让这个表格来滚动。
代码如:

来源:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee#attr-behavior

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wx279089027/article/details/118092605

智能推荐

html标签之视频各种标签_html 实现视频详情多tag标签-程序员宅基地

文章浏览阅读1.4k次。html标签之Object标签详解的定义和用法定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。object 的初衷是取代 img 和 applet 元素。不_html 实现视频详情多tag标签

(3)组合数学--鸽巢原理之最简单形式_鸽巢原理的三个公式-程序员宅基地

文章浏览阅读220次。定理:把n+1个物体放进n个盒子中,至少有一个盒子中含有两个物体理解:ai为第i天下的总棋盘数,显然an为递增序列,对an做部分和序列:如上图所示,上面77项,下面77项,共154项,153个盒子,所有存在aj+21 = ai,所以21 = aj - ai = bi + bi+1 + … + bj相当于19个物体,18个盒子五个点,四个三角形反证:Li <..._鸽巢原理的三个公式

Qt开发笔记之QCustomPlot:QCustomPlot介绍、编译与使用_qcustomplot编译-程序员宅基地

文章浏览阅读6.6w次,点赞20次,收藏194次。欢迎技术交流和帮助,提供所有IT相关的服务,有需要请联系博主QQ: 21497936,若该文为原创文章,未经允许不得转载原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/77847820目录效果 ​Demo下载地址QCustom..._qcustomplot编译

微信小程序的动态显示字体颜色_小程序 color if-程序员宅基地

文章浏览阅读1k次。<text wx:if="{{item.data.status=='待打印'}}" style="color:red">{{item.data.status}}</text><text wx:if="{{item.data.status=='已打印'}}" style="color:green">{{item.data.status}}</text>_小程序 color if

线上PHP问题排查思路与实践-程序员宅基地

文章浏览阅读210次。转载:http://www.bo56.com/%E7%BA%BF%E4%B8%8Aphp%E9%97%AE%E9%A2%98%E6%8E%92%E6%9F%A5%E6%80%9D%E8%B7%AF%E4%B8%8E%E5%AE%9E%E8%B7%B5/前几天,在一淘网,腾讯网媒和微博商业技术联合组织的技术分享大会上,我分享了《在线PHP问题排查思路与实践》。此博文除了对PPT..._在php开发过程中,线上代码怎么查哪段代码有问题,且不影响线上运行

linux 内核升级-程序员宅基地

文章浏览阅读841次,点赞28次,收藏9次。centos 7.x 升级内核 3.x 至 5.x

随便推点

Python获取操作系统版本信息_python 获取当前os版本-程序员宅基地

文章浏览阅读1.3w次。 最近,想在我的YouMoney(http://code.google.com/p/youmoney/)里面增加提取用户操作系统版本信息。比如windows用户,可能要返回Windows XP ,或者Windows 2003, 苹果用户应该返回Mac OS X 10.5.8。用了很多办法,包括在mac系统里调用系统命令,取环境变量,等等。最后无意发现,原来python里里面有个platfor_python 获取当前os版本

【MaixPy快速上手】屏幕和摄像头的使用_maixpy reset failed-程序员宅基地

文章浏览阅读1.3k次。第一个程序: 使用屏幕和摄像头开发板有配套的摄像头和屏幕,请在上电前检查硬件连接是否正确然后上电,打开串口终端, 按键盘Ctrl+E,然后粘贴以下代码:import sensor, lcdsensor.reset()sensor.set_pixformat(sensor.RGB565)sensor.set_framesize(sensor.QVGA)sensor.run(1)sensor.skip_frames()lcd.init(freq=15000000)while(True)_maixpy reset failed

【系统性学习】Linux Shell易忘重点整理_shell赋值保留换行-程序员宅基地

文章浏览阅读1.1k次。本文主要基于《实用Linux Shell编程》总结,并加入一些网上查询资料和博主自己的推断。其中命令相关的,已抽取出来在另一篇中,可以一起使用。_shell赋值保留换行

构造函数和析构函数-程序员宅基地

文章浏览阅读4.2k次,点赞10次,收藏25次。构造函数、初始化列表、析构函数_构造函数和析构函数

分布式架构知识体系-程序员宅基地

文章浏览阅读281次。1.问题 1、何为分布式何为微服务? 2、为什么需要分布式? 3、分布式核心理论基础,节点、网络、时间、顺序,一致性? 4、分布式是系统有哪些设计模式? 5、分布式有哪些类型? 6、如何实现分布式? 2.关键词节点,时间,一致性,CAP,ACID,BASE,P2P,机器伸缩,网络变更,负载均衡,限流,鉴权,服务发现,服务编排,降级,熔断,幂等,分库分表,分片分区,自动运维,容错处理,全栈监控,故障恢复,性能调优3.全文概要随着移动互联网_分布式架构知识体系

深信服AF防火墙配置SSL VPN_深信服ssl配置教程-程序员宅基地

文章浏览阅读1.5k次,点赞6次,收藏13次。深信服防火墙配置SSL VN_深信服ssl配置教程

推荐文章

热门文章

相关标签