纯CSS动画结合js实现轮询滚动/前端轮播

一麻袋开心呀

已于 2024-07-19 13:53:17 修改

阅读量347

点赞数 13

文章标签： css 前端 javascript

于 2024-05-13 17:41:03 首次发布

本文链接：https://blog.csdn.net/weixin_48095278/article/details/138812369

版权

css部分

@keyframes scroll {
   //0%和100%的位置可以根据实际情况调整
  0% {

      transform: translateY(30%);

  }

  100% {

      transform: translateY(-100%); //此处可以减去10px多留一些空间

  }

}

#jobList {

  list-style-type: none;

  padding: 0;

  margin: 0;

  overflow: hidden;

  animation: scroll 500s linear infinite forwards;

}

JS部分

$(document).ready(function(){

        var jobList = $('#jobList');

        var contentHeight = jobList.outerHeight(); // 获取内容高度

        var animationDuration = contentHeight / 50; // 根据内容高度计算动画持续时间，调整数字以控制滚动速度



        // 动态设置动画持续时间

        jobList.css('animation', 'scroll ' + animationDuration + 's linear infinite');



        // 鼠标移入事件

        jobList.mouseenter(function(){

            // 停止滚动动画

            $(this).css('animation-play-state', 'paused');

        });



        // 鼠标移出事件

        jobList.mouseleave(function(){

            // 继续滚动动画

            $(this).css('animation-play-state', 'running');

        });

    });

jQuery实现

js部分

var box = $('#subscribe_scroll');
	// 定义向上移动的函数
	function moveUp() {
		box.css('top','0')
		// 找到第一个子元素，并移除
		var firstChild = box.children().first().remove()
		// 将移除的子元素添加到最后一个位置
		box.append(firstChild);
								
		// 执行向上移动动画
		box.animate({
			top: '-=20px'
		}, '2000', function() {
			// 等待2秒后再次调用 moveUp 函数
			if(that.bottom_is_showWeChatQrcode){
				setTimeout(moveUp, 2000);
			}
		});
	}
// 初始调用 moveUp 函数开始动画
moveUp();