CSS+JS实现单图片模拟背景循环无缝滚动

位置: 首页 > 前端三套件
[发布: 2024.4.4 作者: 马黑阅读: 163]

效果：

代码：

<style>

/* CSS+JS实现单图无缝滚动

① 帖子尺寸和图片尺寸成正比以保证图片不变形

② 主元素和伪元素 z-index 需要配套设置

#mydiv {

margin: 20px auto;

width: 640px;

height: 423px;

position: relative;

overflow: hidden;

z-index: 1;

--state: running;

}

#mydiv::before , #mydiv::after {

position: absolute;

content: '';

left: var(--begin1);

top: 0;

width: 100%;

height: 100%;

background: url('https://638183.freep.cn/638183/t23/3/mwhxyb.jpg') no-repeat center/cover;

z-index: -1;

}

#mydiv::after {

left: var(--begin2);

transform: scale(-1, 1);

}

#play {

position: absolute;

left: calc(50% - 50px);

bottom: 10px;

width: 100px;

cursor: pointer;

animation: rotating 5s linear infinite var(--state);

}

@keyframes rotating { to { transform: rotate(360deg); } }

</style>

</div>

var ww = mydiv.offsetWidth;

/* 自左向右 begin2 = -ww 自右向左 begin2 = ww */

var step = 1, begin1 = 0, begin2 = -ww, raf, mov = true;

moving();

play.onclick = function() {

var state = ['running', 'paused'][+mov];

mydiv.style.setProperty('--state', state);

mov = !mov;

moving();

};

function moving() {

/* 自左向右 : 需要 begin2 = -ww */

begin1 += step;

begin2 += step;

if(begin1 >= ww) begin1 = -ww;

if(begin2 >= ww) begin2 = -ww;

/* 自右向左：需要 begin2 = ww */

begin1 -= step;

begin2 -= step;

if(begin1 <= -ww) begin1 = ww;

if(begin2 <= -ww) begin2 = ww;

mydiv.style.setProperty('--begin1', begin1 + 'px');

mydiv.style.setProperty('--begin2', begin2 + 'px');

mov ? (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'))

: (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'));

};

</script>

前一篇: canvas画布判断鼠标指针是否在圆和矩形内
下一篇: 背景图片滚动演示

发表评论:

评论列表 [2条]

#2 | 马黑于 2024-4-4 16:16 发布: 尝试使用 translate 替代 left 也解决不了手机浏览器出现的缝线。手机从首页切换到手机版，貌似效果可以。

#1 | 了了于 2024-4-4 13:46 发布: 刚回复完就看到代码说明。。。太好了。。var step = 1, begin1 = 0, begin2 = -ww, raf, mov = true;原来这句是移动方向。。：））