天之涯
<style>#papa { margin: 30px 0 0 calc(50% - 681px); width: 1200px; height: 600px; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
#canv { position: absolute; }
#mypic { position: absolute; left: 45%; top: 10px; width: 160px; cursor: pointer; mix-blend-mode: multiply; transform: scale(0.8) rotate(-10deg); animation: scale 2.5s infinite alternate var(--state); }
@keyframes scale { to { transform: scale(1.5) rotate(10deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1928367673" loop autoplay></audio>
<canvas id="canv"></canvas>
<img id="mypic" src="https://638183.freep.cn/638183/small/6a.jpeg" alt="" title="播放/暂停" />
</div>
<script>
(function() {
let w = canv.width = papa.offsetWidth;
let h = canv.height = papa.offsetHeight;
let x = 0, step = 0.5, raf = null;
let ctx = canv.getContext('2d');
let img = document.createElement('img');
img.src = 'https://638183.freep.cn/638183/t24/1/u11.jpeg';
let mState = () => {
aud.paused ?
(papa.style.setProperty('--state', 'paused'),mypic.title = '点击播放') :
(papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停');
move();
}
let move = () => {
ctx.clearRect(0,0,w,h);
x -= step;
if(x <= -w) x = 0;
ctx.drawImage(img, x, 0, w, h);
ctx.drawImage(img, w + x - 1, 0, w, h);
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(move);
};
img.onload = () => move();
aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> <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>
<p>图片滑动代码为原创，要求图片和帖子元素的尺寸一致<br><br></p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 30px 0 0 calc(50% - 681px); <span class="tBlue">width:</span> 1200px; <span class="tBlue">height:</span> 600px; <span class="tBlue">box-shadow:</span> 3px 3px 20px #000; <span class="tBlue">position:</span> relative; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; }</cl-cd>
<cl-cd data-idx="3"> #canv { <span class="tBlue">position:</span> absolute; }</cl-cd>
<cl-cd data-idx="4"> #mypic { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 45%; <span class="tBlue">top:</span> 10px; <span class="tBlue">width:</span> 160px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">mix-blend-mode:</span> multiply; <span class="tBlue">transform:</span> scale(0.8) rotate(-10deg); <span class="tBlue">animation:</span> scale 2.5s infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> @keyframes scale { to { <span class="tBlue">transform:</span> scale(1.5) rotate(10deg); } }</cl-cd>
<cl-cd data-idx="6"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1928367673"</span> loop autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"mypic"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/6a.jpeg"</span> alt=<span class="tMagenta">""</span> title=<span class="tMagenta">"播放/暂停"</span> /></cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"> </cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="15">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">let</span> w = canv.width = papa.offsetWidth;</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">let</span> h = canv.height = papa.offsetHeight;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">let</span> x = 0, step = 0.5, raf = null;</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">let</span> ctx = canv.getContext(<span class="tMagenta">'2d'</span>);</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">let</span> img = <span class="tRed">document</span>.createElement(<span class="tMagenta">'img'</span>);</cl-cd>
<cl-cd data-idx="21"> img.src = <span class="tMagenta">'https://638183.freep.cn/638183/t24/1/u11.jpeg'</span>;</cl-cd>
<cl-cd data-idx="22"> </cl-cd>
<cl-cd data-idx="23"> <span class="tBlue">let</span> mState = () => {</cl-cd>
<cl-cd data-idx="24"> aud.paused ?</cl-cd>
<cl-cd data-idx="25"> (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'paused'</span>),mypic.title = <span class="tMagenta">'点击播放'</span>) :</cl-cd>
<cl-cd data-idx="26"> (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'running'</span>), mypic.title = <span class="tMagenta">'点击暂停'</span>);</cl-cd>
<cl-cd data-idx="27"> move();</cl-cd>
<cl-cd data-idx="28"> }</cl-cd>
<cl-cd data-idx="29"> </cl-cd>
<cl-cd data-idx="30"> <span class="tBlue">let</span> move = () => {</cl-cd>
<cl-cd data-idx="31"> ctx.clearRect(0,0,w,h);</cl-cd>
<cl-cd data-idx="32"> x -= step;</cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">if</span>(x <= -w) x = 0;</cl-cd>
<cl-cd data-idx="34"> ctx.drawImage(img, x, 0, w, h);</cl-cd>
<cl-cd data-idx="35"> ctx.drawImage(img, w + x - 1, 0, w, h);</cl-cd>
<cl-cd data-idx="36"> raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(move);</cl-cd>
<cl-cd data-idx="37"> };</cl-cd>
<cl-cd data-idx="38"> </cl-cd>
<cl-cd data-idx="39"> img.onload = () => move();</cl-cd>
<cl-cd data-idx="40"> aud.onpause = aud.onplaying = () => mState();</cl-cd>
<cl-cd data-idx="41"> aud.onseeking = () => raf = cancelAnimationFrame(raf);</cl-cd>
<cl-cd data-idx="42"> mypic.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="43">})();</cl-cd>
<cl-cd data-idx="44"><<span class="tDarkRed">/script</span>></cl-cd>
</div> https://img0.baidu.com/it/u=2292154268,3811096393&fm=253&fmt=auto&app=138&f=GIF?w=300&h=280 马黑黑 发表于 2024-3-24 12:11
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'And ...
要求图片和帖子元素的尺寸一致
等比例缩放也行吧 起个网名好难 发表于 2024-3-24 12:50
等比例缩放也行吧
理论上可以 这个好玩，跟贴的时候发现，图片左右两边衔接是关键 。。 南无月 发表于 2024-3-24 17:45
这个好玩，跟贴的时候发现，图片左右两边衔接是关键 。。
全景图通过加工后一般是首尾衔接的 航拍呢，这个图片首尾要一致有点难啊 图美音靓，这是开飞机音乐{:5_106:}冲向蓝天。
{:5_117:}{:4_178:}{:4_199:} 大猫咪 发表于 2024-3-24 19:45
图美音靓，这是开飞机音乐冲向蓝天。
你那里陆路交通太复杂，俺只能弄个无人机带路，结果还是带到了没有出路的地方{:4_170:} 绿叶清舟 发表于 2024-3-24 19:31
航拍呢，这个图片首尾要一致有点难啊
全景图懂得吧，喜欢自拍或学PS应该回这个{:4_196:} 马黑黑 发表于 2024-3-24 19:48
你那里陆路交通太复杂，俺只能弄个无人机带路，结果还是带到了没有出路的地方
仰着头 翘起尾的飞 {:4_170:} 马黑黑 发表于 2024-3-24 17:57
全景图通过加工后一般是首尾衔接的
先找了一张挺宽的全景图，直接放上去不好看。。衔接费了一会儿功夫{:4_173:} 马黑黑 发表于 2024-3-24 19:49
全景图懂得吧，喜欢自拍或学PS应该回这个
从来不自拍的了，PS里也有这个啊，从来没用过的了 绿叶清舟 发表于 2024-3-24 20:01
从来不自拍的了，PS里也有这个啊，从来没用过的了
至少应该知道原理 南无月 发表于 2024-3-24 19:53
先找了一张挺宽的全景图，直接放上去不好看。。衔接费了一会儿功夫
眼光要犀利，手脚要灵活 大猫咪 发表于 2024-3-24 19:52
仰着头 翘起尾的飞
{:4_203:} 马黑黑 发表于 2024-3-24 20:30
眼光要犀利，手脚要灵活
那得练一阵子。{:4_173:} 马黑黑 发表于 2024-3-24 20:27
至少应该知道原理
套了一个不用全景加了个边框的，好象框大了些 本来就辽阔的的，这一弄简直无垠了！