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

简介:

一、前言                                   

  有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式。下面记录一下,供日后查阅。

 

二、 marquee标签 的基础知识                          

示例:

<marquee behavior="scroll" direction="left" loop="-1" scrollAmount="12" scrollDelay="42">
滚动的信息 </marquee>

属性

   behavior ,滚动的方式。 值alternate 表示在两端之间来回滚动; 值scroll 表示由一端重复滚动到另一端,为默认值; 值slide 表示由一端不重复地滚动到另一端。 

   direction , 滚动的方向。取值范围为 left(默认值) , right , up 和 down 。

   loop ,滚动的次数。默认值-1表示一直滚动。

   scrollAmount , 设置一次滚动的步长。默认值为6, 当设置为负数时将采用默认值进行滚动。

   scrollDelay ,设置两次滚动间的延迟时间(单位:ms)。默认值为85,当设置为负数时将采用默认值进行滚动。

 

三、鼠标悬浮暂停滚动、移除即恢复滚动                    

<marquee onmouseover="this.stop();" onmouseout="this.start();">
滚动的消息
</marquee>

 

四、总结                                  

  当我们只需实现当条特别公告等简单信息滚动效果时,marquee标签是一个很不错的选择(虽然HTML5中已经将其废除并建议使用CSS3动画效果代替)

  尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4009914.html  ^_^肥仔John

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/4009914.html,如需转载请自行联系原作者


相关文章
|
3月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
22天前
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
41 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
25天前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
47 1
|
25天前
|
前端开发 JavaScript Go
JS基础:输出信息的5种方式详解
JS基础:输出信息的5种方式详解
28 1
|
15天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
32 0
|
23天前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
30 0
|
3月前
|
JavaScript 数据可视化
JS如何优雅的实现模块自动滚动展示
【8月更文挑战第22天】JS如何优雅的实现模块自动滚动展示
30 1
JS如何优雅的实现模块自动滚动展示
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
31 1
|
3月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转