背景图片滚动演示
位置:
首页 >
前端三套件[发布: 2024.4.6 作者: 马黑 阅读: 117]
背景图片滚动演示
图片尺寸：640*423
盒子尺寸：640*423
演示背景滚动的目的，在于展现实现背景图片无缝循环的基本原理。演示是单张图片做背景，通过拖曳滑杆滑块，我们会发现背景图片在往左或往右移动，同时左边或右边出现空当，当滑到两边的尽头，背景图片消失。空当部分如果用合适的背景图适时弥补，便可实现背景图片在滚动时无缝衔接，这在布局技巧和精细算法上需要下一点功夫，目前我们已经实现利用伪元素令单图背景无缝循环滚动的功能，详情请看附一示例。
附一： 袖舞江南
附二：本演示核心代码
<style>
#mydiv {
margin: 20px auto;
width: 640px;
height: 423px;
/* 背景设为不重复，位置为 begin 0，begin是左右移动的变量 */
background: url('https://638183.freep.cn/638183/t23/3/mwhxyb.jpg') no-repeat var(--begin) 0;
border: 1px solid red;
position: relative;
--begin: 0px;
}
</style>
<div id="mydiv"></div>
<div style="width: 280px; margin: 20px 0 20px calc(50% - 50px)">
<input id="bgmov" type="range" min="-640" max="640" value="0" />
<output id="bgmsg">0</output>
</div>
<script>
//滑杆输入事件 ：驱动背景改变位置
bgmov.oninput = () => {
bgmsg.value = bgmov.value;
mydiv.style.setProperty('--begin', bgmov.value + 'px');
};
</script>
前一篇: CSS+JS实现单图片模拟背景循环无缝滚动
下一篇: 9块9包邮的canvas放大镜
发表评论:
评论列表 [1条]
#1 | 悄然 于 2024-4-6 13:32 发布: 老师厉害，又出一个演示……这个太方便了，用来理解代码原理……早上看帖子代码时知道是用伪元素实现的滚动……接缝1像素素怎么处理的，算法很是烧脑……今天糊涂，目前没看懂………
