html 字幕飘动效果,html 滚动字幕 制作滚动字幕效果 参数

制作滚动字幕效果:marquee标签 如下:<MARQUEE direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scrollAmount=4> </marquee>

参数说明:

direction滚动方向:

up向上滚动,down向下滚动,left向左滚动,right向右滚动

behavior滚动方式:

scroll绕来绕去,slide滚动一次就停下来,alternate来回滚动

scrollAmount滚动速度:数值越大滚动越快

scrollDelay滚动延迟:数值越大延迟时间越长

loop循环次数:循环几次

bgcolor背景颜色

height高度

width宽度

οnmοuseοut=start() οnmοuseοver=stop()鼠标悬停停止,离开继续滚动

移动方式可以系属性果度改...下上左右都得...

滚动字幕的使用可以增加网页的动感,让网页显得更有生气。当然用javascript可以实现滚动字幕效果;使用Dreamweaver的图层再用其时间轴功能可以做出非常漂亮的滚动看板。但相对而言,用HTML的滚动字幕标记所需的代码最少,虽然效果不是最好,但确实能够以较少的下载时间换来较好的效果。该标记语法格式如下:

aligh=left|center|right|top|bottom

bgcolor=

direction=left|right|up|down

behavior=

height=

hspace=

scrollamount=

Scrolldelay=

width=

VSpace=

loop= >

滚择不同的参数,滚动字幕会有不同的显示方式。下面解释一下各参数的含义:

align:是设定滚动字幕的位置,除左、中、右三种位置外,还有靠上(align=top)和靠下(align=bottom)两种位置。
Bgcolor:用于设定滚动字幕的背景颜色。

Direction:用于设定滚动字幕的滚动方向。

Behavior:用于设定滚动的方式,

主要由三种方式:behavior="scroll"表示由一端滚动到另一端;behavior="slide":表示由一端快速滑动到另一端,且不再重复;behavior="alternate"表示在两端之间来回滚动。
Height:用于设定滚动字幕的高度

Width:则设定滚动字幕的宽度。

Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。

Scrollamount:用于设定滚动字幕的滚动距离。

scrolldelay:用于设定滚动两次之间的延迟时间。

Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。

标记的默认情况是向左滚动无限次,字幕高度是文本高度,滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。

应用技巧

1、垂直滚动

只要加上diriction="up"就行了,如

向上滚动

2、多行文本的滚动字幕

由于标记只能作用于一段文本,因此多行滚动字幕,分行时只能用
标记,不能用

标记.

滚动字幕内容第一行

滚动字幕内容第二行

滚动字幕内容第三行

3、在字幕内容中加入图象

虽是一个滚动字幕标记,但它允许在其中加入图象:

a2ball.gif这是加入图象的滚动字幕

标记的参数较多,在应用中要把握一个原则,能用默认值就不要再设置参数值,用什么参数就设置该参数的值,其它参数就不要再设置,以把代码控制在最少的范围内。

用MARQUEE标签可以做文字或图片的简单的左右或上下移动。并可以响应鼠标、加入链接。不需要复杂的JS,只要一句简单的MARQUEE标签。

下面跟你介绍下标签中的参数设置。点这里看示例文件。(MARQUEE标签只有IE支持,在NC的浏览器上无效)

先看下代码:

这是放文字或需要移动的图片(光标放在这里时用INSERT命令就可以插入图片)

下面来解释下各参数意思:

direction=left/right/up/down表示移动的方向 可以是 上下左右

BEHAVIOR 属性:改变 marquee 标签内容移动的几种方式。alternate滚动的内容会来回滚动。scroll默认的从右到左的移动。slide滚动结束后会停留在最后的位置上。

scrollAmount:定每显示一个marquee片段间的间距 如 scrollAmount =100

scrollDelay 指定每显示一个marquee片段间的时间差 如 scrollDelay = 1

LOOP:指定循环显示的次数,如 loop=3 还可以1, 默认的值是 无限循环

BGCOLOR: 背景的颜色 如 #990000 black 等都是有效的值

width: 移动范围的长度 如 width=300 也可以是百分数。

height: 移动范围的高度 如 height=50

Align #=top, middle, bottom 表示居中位置

Margins 表示MARQUEE块在上下和左右方向留的空距。

title: 鼠标移动marquee上时出现的说明 好象或图片的ALT那种。

style: 你可加入风格的样式,如字体的颜色等 STYLE="{color: #ffffff; font-family:Arial;font-size:8pt}"

stop的SCRIPT:可以令到滚动停止 试试在中加入 onmouserover=this.stop

start 可以令到滚动重新开始 试试在中加入 onmouserover=this.start

还可以有onbounce 触发当来回一次时触发的事件等等。

也可以用以下的javascript方式控制MARQUEE的鼠标响应:其中iescroller是MARQUEE的ID。

iescroller.οnmοuseοver=new Function("iescroller.scrollAmount=0");

iescroller.οnmοuseοut=new Function("iescroller.scrollAmount=2");

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

静态点分治总结

点分治是世界上最好的算法QwQ 点分治可以解决各种树上的边权点权问题,然后如果你发现这个题好像问的特别玄学,lca,树差都做不了,树上动‘龟’更做不了,只能暴力时,这个题大多数情况就是点分治了 点分治的思…

html节点上下移动,关于前端:数组元素上下移动

/*** 上、下挪动* param {number} code 下标* param {number} dir 1上移 0下移*/onMove(code, dir) {let moveComm (curIndex, nextIndex) > {let arr this.commodityInfoarr[curIndex] arr.splice(nextIndex, 1, arr[curIndex])[0]return arr}this.commodityInfo.some((…

mybatis插入数据后返回自增主键ID详解

1.场景介绍: ​ 开发过程中我们经常性的会用到许多的中间表,用于数据之间的对应和关联.这个时候我们关联最多的就是ID,我们在一张表中插入数据后级联增加到关联表中.我们熟知的mybatis在插入数据后返回的是插入成功的条数,那么这个时候我们想要得到相应的这条新增数据的ID,该怎…

spring 属性占位符_Spring属性占位符配置器–一些不太明显的选项

spring 属性占位符Spring的PropertySourcesPlaceholderConfigurer用于从XML或Java Config中定义的Spring bean定义外部化属性。 PlaceholderConfigurer支持的一些选项在文档中并不明显,但很有趣,并且可能有用。 首先,以Spring文档中的示例为…

红包雨效果html,js+css实现红包雨效果

//每一个红包都是相对于父元素定位,通过z-index来设置层级let zIndex 1;function bindEvent() {$redPackage.on(click,.js-RedPackageBox,function() {//拿到每个红包的数据const data $(this).data(txt);}}//生成mix-max的随机数function getRandom(min,max) {re…

Delphi下实现全屏快速找图找色 二、矩阵遍历

二、矩阵遍历  矩阵遍历是一个数据结构方面的问题。假设有一个矩阵Matrix,它共有RowCount行,每行有ColCount列,当利用y表示行数,x表示列数,那么利用Matrix[y,x]就可以访问矩阵中的任意元素。假设有一个1010大小的矩阵…

Eclipse MicroProfile:您需要了解的5件事

针对微服务架构优化企业Java Eclipse MicroProfile计划是在JavaOne 2016上发起的,JavaOne是服务器供应商和Java用户组的创意,目的是解决企业Java微服务领域的缺点。 Java EE的发布速度减慢到无法应对Swift发展的微服务趋势的挑战的程度。 MicroProfile通…

html 选择不能重复,人生,就是一次无法重复的选择(深度好文)

作者:彩云追月欧洲著名的政治家托马斯 莫尔说:“在人生中最艰难的是选择”。漫漫人生路,有无数的选择,不同的选择,可能会决定我们不同的人生道路。下面的故事也许对你有所启迪:一天,几个学生问…

用HTML做软件UI用到的的一些技术

做WEB开发的想把网页做成应用程序的界面,开发应用程序的又想把程序界面做得和WEB一样。本文介绍一下用HTML做软件UI用到的的一些技术。 其实HTML UI也不是什么新鲜事了,Norton Antivirus从几年前的版本就开始用了,vs.net2002中的开始页也用了…

html css导航栏字体图标,HTML+CSS入门之两种图标字体库

本篇教程介绍了HTMLCSS入门之两种图标字体库&#xff0c;希望阅读本篇文章以后大家有所收获&#xff0c;帮助大家HTMLCSS入门。<## 0. 前言比较基础的图标加载&#xff1a;和块元素的背景background: url(./x.png).页面多图标时&#xff0c;使用雪碧图(多个png压缩成一个png…

垃圾收集算法,垃圾收集器_弱,弱,最弱,利用专家参考来管理垃圾收集器

垃圾收集算法,垃圾收集器何时以及何时不使用Java中的专家引用 弱引用&#xff0c;软引用和幻像引用既危险又强大。 如果以错误的方式使用它们&#xff0c;则会破坏JVM性能。 但是&#xff0c;如果使用正确的方法&#xff0c;它们可以大大提高性能和程序清晰度。 弱引用和软引用…

ESP8266—“ICACHE_FLASH_ATTR”宏

问&#xff1a;ESP8266_NONOS_SDK中ICACHE_FLASH_ATTR宏的用途是什么&#xff1f;我看到它取决于ICACHE_FLASH&#xff0c;但我不知道何时应该定义该符号。什么时候需要包括它&#xff1f;答&#xff1a;对于ESP8266_NONOS_SDK&#xff0c;用ICACHE_FLASH_ATTR编译的函数编译到…

layui网页html编辑器,layui使用富文本编辑器

HTML代码&#xff1a;这里的原理是你输入的内容会经过处理插入到文本区域textarea中js代码&#xff1a;/*** 文本编辑器*/layui.use([form, layedit], function(){var layedit layui.layedit;//上传图片,必须放在 创建一个编辑器前面layedit.set({uploadImage: {url: upload /…

Java应用程序性能监视:复杂的分布式应用程序的端到端性能

通过从应用程序中学习企业APM产品&#xff0c;发现更快&#xff0c;更高效的性能监控。 参加AppDynamics APM导览&#xff01; 在最复杂和分布式环境中端到端监视Java应用程序性能-专注于业务事务。 自动发现的业务交易&#xff0c;动态基准&#xff0c;代码级诊断和虚拟作战室…

C#设计模式(2)——简单工厂模式

一、引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理解的模式——简单工厂模式。 二、简单工厂模式的介绍 说到简单工厂&#xff0c;自然的第一个疑问当然就是什…

计算机应用基础课程基本要求,计算机应用基础课程标准

《计算机应用基础》课程标准一、课程性质&#xff1a;《计算机应用基础》课程是中职学校各专业学生必修的一门公共基础课程&#xff0c;具有很强的实践性和应用性&#xff0c;是各行各业从事现代化办公、计算机设计及应用等领域人材所必须具备的理论知识和实践技能。通过本课程…

S3C2410 bootloader ----VIVI阅读笔记 (转)下

1 static inline void mem_mapping_linear(void) 2 { 3 unsigned long pageoffset, sectionNumber; 4 putstr_hex("MMU table base address 0x", (unsigned long) mmu_tlb_base); 5 /* 4G 虚拟地址映射到相同的物理地址. not cacacheable, no…

华南理工网络计算机基础知识,2019年华南理工大学网络教育计算机基础随堂练习题第一章.docx...

计算机基础知识第一节 计算机的基本概念随堂练习提交截止时间&#xff1a;2019-06-15 23:59:59本次练习有题&#xff0c;你已做题&#xff0c;已提交题&#xff0c;其中答对题。当前页有6题&#xff0c;你已做6题&#xff0c;已提交6题&#xff0c;其中答对6题。1.(单选题)? 计…

orm jdbc_Spring Data JDBC通用DAO实现–迄今为止最轻量的ORM

orm jdbc我很高兴宣布Spring Data JDBC存储库项目的第一个版本。 这个开源库的目的是为基于Spring框架中 JdbcTemplate关系数据库提供通用&#xff0c;轻量且易于使用的DAO实现&#xff0c;与项目的Spring Data 框架兼容。 设计目标 轻巧&#xff0c;快速且开销低。 只有少数几…

NOIP模拟测试9「随·单·题」

liu_runda出的题&#xff0c;先$\%\%\%\%\%\%\%\%\%\%\%$为敬 随 考试时没有Qj 然后甚至没做,甚至没交 我不知道我怎么想的 这个题挺难改 你需要用到 循环矩阵快速幂,矩阵快速幂优化,打表找规律的基础 题解 首先我们可以列出来一个普通的dp式子 设f为第i次操作,操作后x变为j的概…