胜利

马黑黑 · 发表于 2024-3-26 11:39

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-3-26 18:19 编辑

马黑黑 · 发表于 2024-3-26 11:39

帖子代码

<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 553px; box-shadow: 2px 4px 8px #333; position: relative; overflow: hidden; z-index: 1; }
#canv { position: absolute; }
#mypic { position: absolute; left: 45%; top: 40px; width: 80px; cursor: pointer; transform: scale(0.8) skew(-10deg); mix-blend-mode: screen; animation: scale 2.5s infinite alternate var(--state); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: opacity(.3); pointer-events: none; }
@keyframes scale { to { transform: scale(1.5) skew(10deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1930815942" autoplay loop></audio>
<canvas id="canv"></canvas>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4846127e497.mp4" loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/small/2x.jpg" alt="" title="播放/暂停" />
</div>
<script>
(function() {
var w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
var raf = null, dx = 0, step = .5, iw = 1280;
var ctx = canv.getContext('2d');
var img = new Image();
img.src = 'https://638183.freep.cn/638183/t24/webp/2x.webp';
img.onload = () => mState();
function render() {
ctx.clearRect(0,0,w,h);
dx = (dx + step) % iw;
ctx.drawImage(img, dx, 0, w - dx, h, 0, 0, w - dx, h);
ctx.drawImage(img, w, 0, iw - w, h, w - dx, 0, iw - w, h);
ctx.drawImage(img, 0, 0, w + dx - iw, h, iw - dx, 0, w + dx - iw, h);
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(render);
};
function mState() {
aud.paused ?
(papa.style.setProperty('--state', 'paused'), mypic.title = '点击播放', vid.pause()) :
(papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停', vid.play());
render();
};
aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

复制代码

马黑黑 · 发表于 2024-3-26 11:46

不知道哪个变量和论坛的有冲突，需要将JS部分的代码用 function() { ... })(); 包裹起来。

这个版本，对图片的要求如下：图片的高度即为帖子的高度，图片宽度不论，可以大于帖子的宽度。图片为全景图，首尾无缝衔接（可以用工具加工，比如PS或专门的全景图加工工具）。

第 19 行代码中，step 变量是图片滑动步幅，根据图片长度设置，一般为 0.1 ~ 1 之间，具体如何确定视情况、个人需求而定；变量 iw 至关重要，它是图片的实际宽度，这个值我本来是自动获取的，前面发布《胜利》时失败两次，我以为是 iw 的问题，改为了手动赋值，注意不要px单位，纯纯的数字。