Date: 2019-3-11
前言
https://blog.csdn.net/soaringlee_fighting 中友情链接里面的循环播放的图标就是采用这种标签实现的。
1、参考
W3school在线测试工具
打赏功能的实现思路
HTML之marquee(文字滚动)详解
HTML Marquee跑马灯
HTML标签marquee实现滚动效果
HTML中视频、音频、图标、滚动条定位、文字滚动效果、iframe的应用
2、HTML网页滚动条实现方法
Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。
下面来介绍一下标签的属性：
滚动方向 direction
<!--滚动方向 direction 4个值 up down left right 默认从右向左--> <marquee direction="up">我想上滚动</marquee> 滚动方式 behavior
<!--3个值 scroll-循环滚动 slide-只滚动一次 alternate-来回滚动 默认循环滚动--> <marquee behavior="slide">我只滚动一次</marquee> 滚动速度 scrollamount
<!--值越大，滚动速度越快 一般5-10比较适宜消息观看--> <marquee scrollamount="5">我是速度为5的滚动</marquee> 滚动延迟 scrolldelay
<!--值越大，滚动速度越慢，通常不设置--> <marquee scrolldelay="90">我延迟滚动</marquee> 滚动循环 loop
<!-- 默认值-1或infinite 表示无限循环滚动 loop="数值" 表示滚动相应的次数--> <marquee loop="2">我是loop循环滚动</marquee> 滚动范围控制 width height
滚动背景颜色 bgcolor
//宽100px 高90px 背景色为#f5f5f5的滚动区域 <marquee direction="up" width="100" height="90" bgcolor="#f5f5f5" > <p>开发工程师</p> <p>设计师</p> <p>前端开发</p> </marquee> 滚动空间 hspace-水平边距 vspace-垂直边距
<marquee direction="up" width="50" hspace="20" vspace="10" > <p>开发工程师</p> <p>设计师</p> <p>前端开发</p> </marquee> 滚动事件
//鼠标悬停，滚动停止 鼠标离开，滚动继续 <marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()"> <p>开发工程师</p> <p>设计师</p> <p>前端开发</p> </marquee> THE END!
文章来源: https://blog.csdn.net/SoaringLee_fighting/article/details/88394571