美文网首页
跑马灯效果/发文公告栏滚动

跑马灯效果/发文公告栏滚动

作者: 烟凉楼亭雨 | 来源:发表于2020-06-24 17:19 被阅读0次

一、想要得到的效果:

数据在公告栏处由右向左滚动,如图:

滚动效果截图

二、解决思路:

第一次使用的标签来实现数据滚动的,但是兼容效果不行,支持IE11但是IE9上不会滚动

滚动标签属性

html用marquee标签来实现文字滚动属性,常见参数如下:

1.滚动方向direction(包括4个值:daoup、 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,滚动会不断的循环下去)

测试发现好像无法给滚动的数据添加事件且滚动速度无法控制因此做了以下修改,将标签调整为div+js的形式实现滚动

修改后的html文件

在获取需要滚动的数据后调用使数据展示时自动滚动且可以控制滚动速度等,在运行过程由于业务需要会多次调用刷新加载这个效果导致<div></div>中增加的数据原来越多拖慢进程。

获取数据调整 滚动调整

三、遇到的问题

上面有说,刷新的次数越多占用的资源越多执行速度越来越慢造成内存泄漏,修改处可参照对比图,最终代码如下:

最终确定版本 最终版本

相关文章

网友评论

      本文标题:跑马灯效果/发文公告栏滚动

      本文链接:https://www.haomeiwen.com/subject/fqirfktx.html