单图背景水平方向无缝循环滚动模板（两种实现机制）

马黑黑 发表于 2024-4-7 16:48

本帖最后由马黑黑于 2024-4-7 17:50 编辑 <style>
.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>一、移动伪元素的实现机制</h2>
这个机制有灵活性，帖子元素的宽高可以不管背景图片的实际尺寸。 
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3">    margin: 20px auto;</cl-cd>
<cl-cd data-idx="4">    width: 960px;</cl-cd>
<cl-cd data-idx="5">    height: 540px;</cl-cd>
<cl-cd data-idx="6">    background: lightgreen url('https://638183.freep.cn/638183/t24/1/levels.jpg') no-repeat center/cover;</cl-cd>
<cl-cd data-idx="7">    box-shadow: 4px 4px 8px gray;</cl-cd>
<cl-cd data-idx="8">    box-sizing: border-box;</cl-cd>
<cl-cd data-idx="9">    overflow: hidden;</cl-cd>
<cl-cd data-idx="10">    z-index: 1;</cl-cd>
<cl-cd data-idx="11">    position: relative;</cl-cd>
<cl-cd data-idx="12">}</cl-cd>
<cl-cd data-idx="13">#mydiv::before , #mydiv::after {</cl-cd>
<cl-cd data-idx="14">    position: absolute;</cl-cd>
<cl-cd data-idx="15">    content: '';</cl-cd>
<cl-cd data-idx="16">    left: var(--begin1);</cl-cd>
<cl-cd data-idx="17">    top: 0px;</cl-cd>
<cl-cd data-idx="18">    width: 100%;</cl-cd>
<cl-cd data-idx="19">    height: 100%;</cl-cd>
<cl-cd data-idx="20">    background: url('https://638183.freep.cn/638183/t24/1/levels.jpg') no-repeat center/cover;</cl-cd>
<cl-cd data-idx="21">    z-index: -1;</cl-cd>
<cl-cd data-idx="22">}</cl-cd>
<cl-cd data-idx="23"> </cl-cd>
<cl-cd data-idx="24">#mydiv::after {</cl-cd>
<cl-cd data-idx="25">    left: var(--begin2);</cl-cd>
<cl-cd data-idx="26">    transform: scale(-1,1);</cl-cd>
<cl-cd data-idx="27">}</cl-cd>
<cl-cd data-idx="28">#play {</cl-cd>
<cl-cd data-idx="29">    position: absolute;</cl-cd>
<cl-cd data-idx="30">    left: calc(50% - 50px);</cl-cd>
<cl-cd data-idx="31">    bottom: 10px;</cl-cd>
<cl-cd data-idx="32">    width: 100px;</cl-cd>
<cl-cd data-idx="33">    cursor: pointer;</cl-cd>
<cl-cd data-idx="34">    animation: rotating 5s linear infinite var(--state);</cl-cd>
<cl-cd data-idx="35">}</cl-cd>
<cl-cd data-idx="36">#vid {</cl-cd>
<cl-cd data-idx="37">    position: absolute;</cl-cd>
<cl-cd data-idx="38">    right: 0;</cl-cd>
<cl-cd data-idx="39">    width: 40%;</cl-cd>
<cl-cd data-idx="40">    height: 30%;</cl-cd>
<cl-cd data-idx="41">    object-fit: cover;</cl-cd>
<cl-cd data-idx="42">    mix-blend-mode: screen;</cl-cd>
<cl-cd data-idx="43">    transform: rotate(-15deg);</cl-cd>
<cl-cd data-idx="44">    pointer-events: none;</cl-cd>
<cl-cd data-idx="45">}</cl-cd>
<cl-cd data-idx="46">@keyframes rotating { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="47"></style></cl-cd>
<cl-cd data-idx="48"> </cl-cd>
<cl-cd data-idx="49"><div id="mydiv"></cl-cd>
<cl-cd data-idx="50">    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2130363396" autoplay></audio></cl-cd>
<cl-cd data-idx="51">    <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" muted loop></video></cl-cd>
<cl-cd data-idx="52">    <img id="play" src="https://638183.freep.cn/638183/web/svg/clover4.svg" alt="" /></cl-cd>
<cl-cd data-idx="53"></div></cl-cd>
<cl-cd data-idx="54"> </cl-cd>
<cl-cd data-idx="55"><script></cl-cd>
<cl-cd data-idx="56"> </cl-cd>
<cl-cd data-idx="57">var ww = mydiv.offsetWidth;</cl-cd>
<cl-cd data-idx="58"> </cl-cd>
<cl-cd data-idx="59">var step = 1, begin1 = 0, begin2 = ww, raf;</cl-cd>
<cl-cd data-idx="60"> </cl-cd>
<cl-cd data-idx="61">aud.loop = false;</cl-cd>
<cl-cd data-idx="62">aud.onpause = aud.onplaying = () =>moving();</cl-cd>
<cl-cd data-idx="63">aud.onseeked = () => cancelAnimationFrame(raf);</cl-cd>
<cl-cd data-idx="64">aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };</cl-cd>
<cl-cd data-idx="65"> </cl-cd>
<cl-cd data-idx="66">play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };</cl-cd>
<cl-cd data-idx="67"> </cl-cd>
<cl-cd data-idx="68">var moving = () => {</cl-cd>
<cl-cd data-idx="69">    //自左向右</cl-cd>
<cl-cd data-idx="70">    begin1 += step;</cl-cd>
<cl-cd data-idx="71">    begin2 += step;</cl-cd>
<cl-cd data-idx="72">    if(begin1 >= ww) begin1 = -ww;</cl-cd>
<cl-cd data-idx="73">    if(begin2 >= ww) begin2 = -ww;</cl-cd>
<div class="tGreen"><cl-cd data-idx="74">/* 自右向左</cl-cd>
<cl-cd data-idx="75">    begin1 -= step;</cl-cd>
<cl-cd data-idx="76">    begin2 -= step;</cl-cd>
<cl-cd data-idx="77">    if(begin1 <= -ww) begin1 = ww;</cl-cd>
<cl-cd data-idx="78">    if(begin2 <= -ww) begin2 = ww;</cl-cd>
<cl-cd data-idx="79">*/</cl-cd></div>
<cl-cd data-idx="80">    let b2 = begin2 + (begin1 >= 0 ? 1 : -1);</cl-cd>
<cl-cd data-idx="81">    mydiv.style.setProperty('--begin1', begin1 + 'px');</cl-cd>
<cl-cd data-idx="82">    mydiv.style.setProperty('--begin2', b2 + 'px');</cl-cd>
<cl-cd data-idx="83">    aud.paused</cl-cd>
<cl-cd data-idx="84">        ? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'), vid.pause())</cl-cd>
<cl-cd data-idx="85">        : (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'),vid.play());</cl-cd>
<cl-cd data-idx="86">};</cl-cd>
<cl-cd data-idx="87"> </cl-cd>
<cl-cd data-idx="88"></script></cl-cd>
</div>

<h2>二、移动伪元素背景的实现机制</h2>
注意：，这个机制要求帖子元素宽高尺寸等于图片实际宽高尺寸。 
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#mydiv {</cl-cd>
<cl-cd data-idx="3">    margin: 20px 0 20px calc(50% - 641px);</cl-cd>
<cl-cd data-idx="4">    width: 1280px;</cl-cd>
<cl-cd data-idx="5">    height: 800px;</cl-cd>
<cl-cd data-idx="6">    background: lightblue;</cl-cd>
<cl-cd data-idx="7">    box-shadow: 4px 4px 8px #000;</cl-cd>
<cl-cd data-idx="8">    overflow: hidden;</cl-cd>
<cl-cd data-idx="9">    z-index: 1;</cl-cd>
<cl-cd data-idx="10">    position: relative;</cl-cd>
<cl-cd data-idx="11">    --begin1: 0px;</cl-cd>
<cl-cd data-idx="12">    --begin2: -1280px;</cl-cd>
<cl-cd data-idx="13">}</cl-cd>
<cl-cd data-idx="14">#mydiv::before , #mydiv::after {</cl-cd>
<cl-cd data-idx="15">    position: absolute;</cl-cd>
<cl-cd data-idx="16">    content: '';</cl-cd>
<cl-cd data-idx="17">    inset: 0;</cl-cd>
<cl-cd data-idx="18">    background: url('https://638183.freep.cn/638183/t24/1/prologue.jpg') no-repeat;</cl-cd>
<cl-cd data-idx="19">    z-index: -2;</cl-cd>
<cl-cd data-idx="20">}</cl-cd>
<cl-cd data-idx="21">#mydiv::before {</cl-cd>
<cl-cd data-idx="22">    background-position: var(--begin1) 0;</cl-cd>
<cl-cd data-idx="23">}</cl-cd>
<cl-cd data-idx="24">#mydiv::after {</cl-cd>
<cl-cd data-idx="25">    transform: scale(-1, 1);</cl-cd>
<cl-cd data-idx="26">    background-position: var(--begin2) 0;</cl-cd>
<cl-cd data-idx="27">}</cl-cd>
<cl-cd data-idx="28">#play {</cl-cd>
<cl-cd data-idx="29">    position: absolute;</cl-cd>
<cl-cd data-idx="30">    left: calc(50% - 50px);</cl-cd>
<cl-cd data-idx="31">    top: 20px;</cl-cd>
<cl-cd data-idx="32">    width: 100px;</cl-cd>
<cl-cd data-idx="33">    cursor: pointer;</cl-cd>
<cl-cd data-idx="34">    animation: rotating 5s linear infinite var(--state);</cl-cd>
<cl-cd data-idx="35">}</cl-cd>
<cl-cd data-idx="36">#vid {</cl-cd>
<cl-cd data-idx="37">    position: absolute;</cl-cd>
<cl-cd data-idx="38">    right: 0;</cl-cd>
<cl-cd data-idx="39">    width: 40%;</cl-cd>
<cl-cd data-idx="40">    height: 30%;</cl-cd>
<cl-cd data-idx="41">    object-fit: cover;</cl-cd>
<cl-cd data-idx="42">    mix-blend-mode: screen;</cl-cd>
<cl-cd data-idx="43">    transform: rotate(-15deg);</cl-cd>
<cl-cd data-idx="44">    pointer-events: none;</cl-cd>
<cl-cd data-idx="45">}</cl-cd>
<cl-cd data-idx="46">@keyframes rotating { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="47"></style></cl-cd>
<cl-cd data-idx="48"> </cl-cd>
<cl-cd data-idx="49"><div id="mydiv"></cl-cd>
<cl-cd data-idx="50">    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2923186" autoplay></audio></cl-cd>
<cl-cd data-idx="51">    <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" muted loop></video></cl-cd>
<cl-cd data-idx="52">    <img id="play" src="https://638183.freep.cn/638183/small/4yc.png" alt="" /></cl-cd>
<cl-cd data-idx="53"></div></cl-cd>
<cl-cd data-idx="54"> </cl-cd>
<cl-cd data-idx="55"><script></cl-cd>
<cl-cd data-idx="56">var ww = mydiv.offsetWidth;</cl-cd>
<cl-cd data-idx="57">var step = 0.5, begin1 = 0, raf = null;</cl-cd>
<cl-cd data-idx="58">aud.loo = false;</cl-cd>
<cl-cd data-idx="59">play.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="60">aud.onpause = aud.onplaying = () => mState();</cl-cd>
<cl-cd data-idx="61">aud.onended = () => { aud.play(); cancelAnimationFrame(raf); }</cl-cd>
<cl-cd data-idx="62">aud.onseeked = () => cancelAnimationFrame(raf);</cl-cd>
<cl-cd data-idx="63">var moving = () => {</cl-cd>
<cl-cd data-idx="64">    //自左向右</cl-cd>
<cl-cd data-idx="65">    begin1 += step;</cl-cd>
<cl-cd data-idx="66">    if(begin1 >= ww) begin1 = -ww;</cl-cd>
<div class="tGreen"><cl-cd data-idx="67">    /* 自右向左</cl-cd>
<cl-cd data-idx="68">    begin1 -= step;</cl-cd>
<cl-cd data-idx="69">    if(begin1 <= -ww) begin1 = ww;</cl-cd>
<cl-cd data-idx="70">    */</cl-cd></div>
<cl-cd data-idx="71">    begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : begin2 = -1 * (begin1 + ww - 1);</cl-cd>
<cl-cd data-idx="72">    mydiv.style.setProperty('--begin1', begin1 + 'px');</cl-cd>
<cl-cd data-idx="73">    mydiv.style.setProperty('--begin2', begin2 + 'px');</cl-cd>
<cl-cd data-idx="74">    aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);</cl-cd>
<cl-cd data-idx="75">};</cl-cd>
<cl-cd data-idx="76">var mState = () => {</cl-cd>
<cl-cd data-idx="77">    aud.paused</cl-cd>
<cl-cd data-idx="78">        ? (mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf), vid.pause())</cl-cd>
<cl-cd data-idx="79">        : (mydiv.style.setProperty('--state', 'running'), raf = requestAnimationFrame(moving), vid.play());</cl-cd>
<cl-cd data-idx="80">};</cl-cd>
<cl-cd data-idx="81"></script></cl-cd>
</div>

马黑黑 发表于 2024-4-7 16:52

欲查看效果，可以讲上述代码逐一复制到 pencil code 运行，或逐一保存为本地 .html 文档后双击运行

马黑黑 发表于 2024-4-7 16:56

两种实现机制均已在计算机浏览环境、部分虚拟移动设备和少量移动设备真机浏览环境下测试通过。发现效果异常的，烦请反馈一下，反馈时请说清楚浏览环境（诸如电脑还是手机、平板、机顶盒，以及浏览器名称、版本等信息）

庶民发表于 2024-4-7 17:41

支持一下。

马黑黑 发表于 2024-4-7 17:48

庶民发表于 2024-4-7 17:41
支持一下。

感谢支持

亚伦影音工作室 发表于 2024-4-7 17:50

到位，必须点赞！

马黑黑 发表于 2024-4-7 18:28

亚伦影音工作室发表于 2024-4-7 17:50
到位，必须点赞！

蟹蟹

红影发表于 2024-4-7 19:32

两个都去看了效果，十分完美{:4_199:}

红影发表于 2024-4-7 19:34

通过伪元素实现的图图滚动，而且可以加入和控制视频，很赞{:4_199:}

南无月 发表于 2024-4-7 20:42

马黑黑发表于 2024-4-7 16:56
两种实现机制均已在计算机浏览环境、部分虚拟移动设备和少量移动设备真机浏览环境下测试通过。发现效果异常 ...

平板还未试过。。这就去充个电先。。一会试下。{:4_173:}

南无月 发表于 2024-4-7 20:42

音频联动控制中，包含了一个视频的同步控制。
这个最实用了。{:4_199:}

马黑黑 发表于 2024-4-7 22:08

南无月发表于 2024-4-7 20:42
音频联动控制中，包含了一个视频的同步控制。
这个最实用了。

视频和音频联动控制，我们有诸多方式的

马黑黑 发表于 2024-4-7 22:08

南无月发表于 2024-4-7 20:42
平板还未试过。。这就去充个电先。。一会试下。

试试也好

南无月 发表于 2024-4-7 22:09

马黑黑发表于 2024-4-7 22:08
视频和音频联动控制，我们有诸多方式的

{:4_173:}模板里有的方式就是最方便

马黑黑 发表于 2024-4-7 22:10

南无月发表于 2024-4-7 22:09
模板里有的方式就是最方便

这两个需要视频有 id， id="vid"

南无月 发表于 2024-4-7 22:10

马黑黑发表于 2024-4-7 22:08
试试也好

平板试了，十分流畅，没有问题。。
{:4_187:}

马黑黑 发表于 2024-4-7 22:11

南无月发表于 2024-4-7 22:10
平板试了，十分流畅，没有问题。。

安卓平板吧

小辣椒 发表于 2024-4-7 22:45

都电脑测试了一下，非常流畅{:4_199:}

马黑黑 发表于 2024-4-7 23:04

小辣椒发表于 2024-4-7 22:45
都电脑测试了一下，非常流畅

辛苦{:4_190:}

南无月 发表于 2024-4-8 17:44

马黑黑发表于 2024-4-7 22:11
安卓平板吧

{:4_170:}我回去看看

页: [1] 2 3

花潮论坛's Archiver

单图背景水平方向无缝循环滚动模板（两种实现机制）