请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-4-6 09:38 编辑
背景图片滚动演示
图片尺寸：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>
| 
发表于 2024-4-6 09:36
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-4-6 16:34
楼主
果酱快被吃完了