【HTML系列】网页元素(滚动条)实现方法

Date: 2019-3-11

---

前言

    前端开发中HTML语言实现了网页中内容的解析。本文讲述了HTML网页滚动条的实现方法。本人博客主页 https://blog.csdn.net/soaringlee_fighting 中友情链接里面的循环播放的图标就是采用这种标签实现的。

1、参考

W3school在线测试工具
打赏功能的实现思路
HTML之marquee(文字滚动)详解
HTML Marquee跑马灯
HTML标签marquee实现滚动效果
HTML中视频、音频、图标、滚动条定位、文字滚动效果、iframe的应用

2、HTML网页滚动条实现方法

Marquee是html的标签，所有的主流浏览器都能兼容，用于创建文字滚动。
下面来介绍一下标签的属性：
滚动方向 direction

<marquee direction="up">我想上滚动marquee>

滚动方式 behavior

<marquee behavior="slide">我只滚动一次marquee>

滚动速度 scrollamount

<marquee scrollamount="5">我是速度为5的滚动marquee>

滚动延迟 scrolldelay

<marquee scrolldelay="90">我延迟滚动marquee>

滚动循环 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!