前阵子由于业务需要,使用了无缝无限轮番滚动插件limarquee,在使用过程中发现一些小问题,html元素所包含的图片在滚动的时候会有抖动的情况,导致看上去极不美观,没有平滑的效果。最终是通过一个小技巧稍微缓解了轮番过程中图片略微抖动的问题,但是还是没有较好的解决方法。
经过各种尝试,发现造成limarquee抖动的情况应该属于浏览器兼容问题,可以通过设置轮番元素父容器的font-size属性为0来解决这个问题,如果轮番的元素有包含文字,那么包含文字的元素需要额外设置字体大小。
比如如下代码:
/*.div-list为轮番的父容器样式*/
.div-list{
font-size:0 !important;
}
/*.div-item-right为轮番元素中文字描述区域*/
.div-item-right {
float: right;
width: 100px;
font-size:12px;
}
代码中父容器的class为div-list,将font-size设置为0,可以稍微减轻抖动的问题,但是仔细看问题依然会存在。
这个问题在官方的演示中也有出现,另外要注意的是该插件是俄国程序员编写的,可以看到插件中包含很多俄语(本人用翻译软件检测出来的),所以相关文档看着有点头疼,github上的文档资料十分稀少,暂时先用这个插件过渡下吧,以后在找个好用点的。
PS:
- 插件github地址
- 插件官方网站
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/98737.html