帖子代码
图片滑动代码为原创，要求图片和帖子元素的尺寸一致
<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>
| 
发表于 2024-3-24 12:11
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-24 12:49
发表于 2024-3-24 17:45
发表于 2024-3-24 19:31
冲向蓝天。
