背景图片滚动演示
本帖最后由 马黑黑 于 2024-4-6 09:38 编辑 <br /><br /><style>#mydiv {
margin: 20px auto;
padding: 20px;
width: 640px;
height: 423px;
background: url('https://638183.freep.cn/638183/t23/3/mwhxyb.jpg') no-repeat var(--begin) 0;
border: 1px solid red;
box-sizing: border-box;
position: relative;
--begin: 0px;
}
.tMid { text-align: center; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2 class='tMid'>背景图片滚动演示</h2>
<div id="mydiv">图片尺寸：640*423<br>盒子尺寸：640*423</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>
<button id="reset" type="button" value="reset" onclick="setting(0)" style="float: right">重置</button>
</div>
<p>演示背景滚动的目的，在于展现实现背景图片无缝循环的基本原理。演示是单张图片做背景，通过拖曳滑杆滑块，我们会发现背景图片在往左或往右移动，同时左边或右边出现空当，当滑到两边的尽头，背景图片消失。空当部分如果用合适的背景图适时弥补，便可实现背景图片在滚动时无缝衔接，这在布局技巧和精细算法上需要下一点功夫，目前我们已经实现利用伪元素令单图背景无缝循环滚动的功能，详情请看附一示例。</p>
<p>附一： <a href="http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1712322641" target="_blank">袖舞江南</a></p>
<p>附二：本演示核心代码</p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> 20px auto;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 640px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 423px;</cl-cd>
<cl-cd data-idx="6"> <span class="tGreen">/* 背景设为不重复，位置为 begin 0，begin是左右移动的变量 */</span></cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t23/3/mwhxyb.jpg'</span>) no-repeat <span class="tBlue">var</span>(--begin) 0;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">border:</span> 1px solid red;</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="10"> <span class="tBlue">--begin:</span> 0px;</cl-cd>
<cl-cd data-idx="11">}</cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mydiv"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">div</span> style=<span class="tMagenta">"<span class="tBlue">width:</span> 280px; <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 50px)"</span>></cl-cd>
<cl-cd data-idx="16"> <<span class="tDarkRed">input</span> <span class="tRed">id</span>=<span class="tMagenta">"bgmov"</span> type=<span class="tMagenta">"range"</span> min=<span class="tMagenta">"-640"</span> max=<span class="tMagenta">"640"</span> value=<span class="tMagenta">"0"</span> /></cl-cd>
<cl-cd data-idx="17"> <<span class="tDarkRed">output</span> <span class="tRed">id</span>=<span class="tMagenta">"bgmsg"</span>>0<<span class="tDarkRed">/output</span>></cl-cd>
<cl-cd data-idx="18"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="19"> </cl-cd>
<cl-cd data-idx="20"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="21"><span class="tGreen">//滑杆输入事件 ：驱动背景改变位置</span></cl-cd>
<cl-cd data-idx="22">bgmov.oninput = () => {</cl-cd>
<cl-cd data-idx="23"> bgmsg.value = bgmov.value;</cl-cd>
<cl-cd data-idx="24"> mydiv.style.setProperty(<span class="tMagenta">'--begin'</span>, bgmov.value + <span class="tMagenta">'px'</span>);</cl-cd>
<cl-cd data-idx="25">};</cl-cd>
<cl-cd data-idx="26"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<script>
var setting = (val) => {
bgmov.value = bgmsg.value = val;
mydiv.style.setProperty('--begin', bgmov.value + 'px');
};
bgmov.oninput = () => {
bgmsg.value = bgmov.value;
mydiv.style.setProperty('--begin', bgmov.value + 'px');
};
setting(0);
</script> 这个可以用滑竿手动去移动图图，对于理解图片滚动更形象了{:4_187:} 这个帖子还能用来理解如何设置滑竿以及重置的设置，真棒{:4_199:} 我也可以拉动图片，感觉挺厉害{:5_106:} 小水瓢 发表于 2024-4-6 16:34
我也可以拉动图片，感觉挺厉害
厉害的说{:4_170:} 红影 发表于 2024-4-6 09:43
这个可以用滑竿手动去移动图图，对于理解图片滚动更形象了
也许可以解释一下背景图片滚动最基本的原理 红影 发表于 2024-4-6 09:45
这个帖子还能用来理解如何设置滑竿以及重置的设置，真棒
谢棒 老师的演示贴看上去又实用又高级。。{:4_199:} 南无月 发表于 2024-4-6 19:01
老师的演示贴看上去又实用又高级。。
果酱果酱
马黑黑 发表于 2024-4-6 19:56
果酱果酱
{:4_174:}果酱快被吃完了 南无月 发表于 2024-4-6 20:15
果酱快被吃完了
有的是有的是 马黑黑 发表于 2024-4-6 18:14
也许可以解释一下背景图片滚动最基本的原理
是的，这个演示特别好{:4_187:} 马黑黑 发表于 2024-4-6 18:15
谢棒
不是棍棒的棒哦，是代表很好的棒{:4_170:} 红影 发表于 2024-4-6 23:31
是的，这个演示特别好
谢好 红影 发表于 2024-4-6 23:32
不是棍棒的棒哦，是代表很好的棒
棍棒之下，谁能说棍棒不好？ 马黑黑 发表于 2024-4-6 21:01
有的是有的是
哪里哪里。。{:4_170:} 南无月 发表于 2024-4-7 18:19
哪里哪里。。
这里这里 马黑黑 发表于 2024-4-7 18:26
这里这里
这里咋就这么好呢。。真是个好地方。{:4_170:} 南无月 发表于 2024-4-7 20:39
这里咋就这么好呢。。真是个好地方。
{:4_190:}
页:
[1]