实现自动滚动(且可以设置各种属性)

`页面的自动滚动效果
页面的自动滚动效果,可由javascript来实现,

但是有一个html标签 - 可以实现多种滚动效果,无需js控制。

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

语法:<marquee>...</marquee>; 说明:在标记之间添加要进行滚动的内容。

重要属性:

1.滚动方向direction(包括4个值:up、 down、 left和 right)

语法:<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior(scroll:循环滚动,默认效果; slide:只滚动一次就停止; alternate:来回交替进行滚动)

语法:<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount(滚动速度是设置每次滚动时移动的长度,以像素为单位)

语法:<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay(设置滚动的时间间隔,单位是毫秒)

语法:<marquee scrolldelay="100">...</marquee>

5.滚动循环loop(默认值是-1,滚动会不断的循环下去)

语法:<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

代码示例

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head>
<body><div><marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">

确实好用

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-scrollbar 是 element-ui 中的一个组件,可以用于实现在一个容器内部的无限滚动效果。实现自动滚动可以通过设置 el-scrollbar 的属性和使用 JavaScript 的 DOM 操作来完成。 首先在需要实现滚动效果的容器上添加 el-scrollbar,例如: ```html <el-scrollbar style="height: 300px;"> <ul> <li>...</li> <li>...</li> <li>...</li> ... </ul> </el-scrollbar> ``` 其中 ul 列表是需要滚动的内容。接下来,可以使用 CSS 的 overflow 属性来隐藏容器内多余的内容,只显示 el-scrollbar 内部的内容: ```css ul { overflow: hidden; padding: 0; margin: 0; list-style: none; } ``` 为了实现自动滚动,可以使用 JavaScript 来控制内容滚动的位置,以及设置一个定时器来定期滚动内容。 ```js // 获取 el-scrollbar 中的 ul 列表 const ul = document.querySelector('.el-scrollbar ul'); // 每秒滚动50个像素 const scrollSpeed = 50; function scrollStep() { ul.scrollTop += scrollSpeed; // 如果已经滚动到底部,回到顶部 if (ul.scrollTop + ul.offsetHeight >= ul.scrollHeight) { ul.scrollTop = 0; } } // 每隔一定的时间调用一次 scrollStep setInterval(scrollStep, 1000 / 60); ``` 上述代码中通过获取 el-scrollbar 中的 ul 列表,然后每次将 scrollTop 属性递增 scrollSpeed 的值来实现自动滚动。如果滚动到了内容的底部,则将 scrollTop 重置为0,实现循环滚动的效果。 综上所述,通过使用 el-scrollbar 组件以及 CSS 和 JavaScript 的操作,可以实现容器内部自动滚动的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值