原生js实现中奖信息无间隙滚动效果

前端之家收集整理的这篇文章主要介绍了原生js实现中奖信息无间隙滚动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

知识要点

1.实现原理:通过定时器不断改变列表的top值。而达到无间隙滚动就要对信息列表复制一份,再判断两个列表的top临界值初始化。最后注意的就是 防止动画积存需要对定时器进行清除。

2.用到的属性方法

函数,可以无限执行下去 clearInterval() //清除指定的setInterval setTimeout() //经过一定时间执行一次函数,只能执行一次,如果要无限下去需要在函数里自行设置 clearTimeout() //清除指定的setTimeout

剩下的就是一些基础的dom操作

完整代码

注:因为看到了天猫积分的抽奖页面所以想自己写试试,审查天猫代码看到原理是改变列表top值,无缝滚动是自己瞎琢磨的,估计应该有更高效的方法还请大神指教。。

demo
会员中奖榜

m**b
抽中18积分
  • 小**宫
    抽中28积分
  • 金**告
    抽中8积分
  • 真**生
    抽中88积分
  • 郑**9
    抽中18积分
  • l**美
    抽中8积分
  • 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

    原文链接:https://www.f2er.com/js/42367.html

    猜你在找的JavaScript相关文章