请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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>
|