实现一个纵向无缝衔接连续滚动


可以使用css的transition来实现这个效果。

首先是页面层
要有一个可视化的外层盒子高度定死,内层盒子高度自适应 并使用绝对定位,外层盒子使用overflow: hidden内容超出隐藏 并使用相对定位。
function scrollAnimation() {
  // 首先要获取外层盒子的高度
  let wrapHeight = $('.wrap-box').outerHeight();
  // 再获取内层盒子高度
  let boxHeight = $('.main-box').outerHeight();
  // 再拿内层盒子高度减去外层盒子高度得出要定位移动的位置
  let totalHeight = boxHeight - wrapHeight;
  // 算出过度动画进行的时间
  let totalTime = Math.ceil(totalHeight / 20);
  // 得到动画的时间,和过度动画需要定位位置后,开始赋值css,当然赋值前要先清理一遍,防止无缝衔接障眼法被看穿
  $('.main-box').css({ 'transition': 'none', 'top': '0px' });
  // 这里使用个计时器,赋值要进行的动画
  setTimeout(_ => {
    $('.main-box').css({ 'transition': `all ${totalTime}s linear`, 'top': ${-totalHeight}px });
  }, 30)
  // 这里再新增个计时器,用来监视动画做完重新运行
  setTimeout(_ => {
    scrollAnimation()
  }, totalTime * 1000)
}


注意:数据赋值的时候看下外层盒子显示几个list,比如显示3个要把前三个数据填充到总数据的后面,以实现障眼法

363

声明:Web前端小站 - 前端博客 - 王搏的个人博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - 实现一个纵向无缝衔接连续滚动

评论
孙瑞杰生日