0

0

html marquee标签如何设置图片滚动?marquee标签的图片滚动代码实例

寻∝梦

寻∝梦

发布时间:2018-09-04 14:00:23

|

9218人浏览过

|

来源于php中文网

原创

本篇文章主要介绍了关于html marquee标签的属性及其marquee标签的图片滚动用法实例,大家可以多试验实验,这样效果会更好。下面就让我们一起来看这篇文章吧

要想设置图片滚动,我们先了解几个html marquee标签的属性:

  • innerHTML:     设置或获取位于对象起始和结束标签内的 HTML

  • scrollHeight: 获取对象的滚动高度。

  • scrollLeft:    设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

    立即学习前端免费学习笔记(深入)”;

  • scrollTop:     设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

  • scrollWidth:   获取对象的滚动宽度

  • offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

  • offsetLeft:    获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

  • offsetTop:     获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

  • offsetWidth:   获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

能够把这些弄清楚之后就来看看一个滚动实例吧:


 需要滚动的文字
 需要滚动的文字
 也可以程序代码
@@##@@
 

上面我已经插了一张图片了,效果是动态,截图不太好看,但是我们也要看看,如图:

html marquee标签如何设置图片滚动?marquee标签的图片滚动代码实例

这个是无缝滚动的。我们要把里面的属性了解了之后才能知道原理。其实也不是很难,

html marquee标签的图片滚动说明:

1.中间的内容可以为 文字,图片,也可以是由程序生成的文字或图片

传媒公司模板(RTCMS)1.0
传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://

下载

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

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

html marquee标签的图片滚动代码如下:

align="absbottom":绝对底部对齐(与g、p等字母的最下端对齐)。 
align="absmiddle": 绝对中央对齐。 
align="baseline": 底线对齐。 
align="bottom": 底部对齐(默认)。 
align="left": 左对齐。 
align="middle": 中间对齐。 
align="right": 右对齐。 
align="texttop": 顶线对齐。 
align="top": 顶部对齐。 
  • behavior:设定滚动的方式

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

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

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

html marquee标签的图片滚动代码如下:

alternate:表示在两端之间来回滚动。 
scroll:表示由一端滚动到另一端,会重复。
slide:  表示由一端滚动到另一端,不会重复。

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

html marquee标签的好处:

页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制。

使用marquee标记不仅可以移动文字,也可以移动图片,表格等.

【小编推荐】

html中的字体颜色怎么设置?css设置字体颜色方法介绍

html a标签怎么设置颜色?超链接的颜色设置总结(css样式)

tuyi.png

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

11

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.8万人学习

CSS教程
CSS教程

共754课时 | 22.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号