CSS+JS实现单图片模拟背景循环无缝滚动
位置:
首页 >
前端三套件[ 发布时间: 2024.4.4 作者: 马黑 阅读: 339 ]
效果：
代码：
<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 id="mydiv">
<img id="play" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" alt="" />
</div>
<script>
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;原来这句是移动方向。。：））
