论坛 › 音乐沙龙 › 我有一段情（萨克斯风）TO：走过岁月

小辣椒 发表于 2024-9-7 19:53

我有一段情（萨克斯风）TO：走过岁月

<style>
#tz {
        margin: 150px 0 30px calc(50% - 805px);
        width: 1449px;
        height: 742px;
        background: url('https://xlaj.cn/assets/file/zp/20230708001832.gif') no-repeat center/cover;
        box-shadow: 4px 4px 8px #333;
        z-index: 1;
        position: relative;
}
#player {
        --size: 120px;
        --color: #1b6590;
        position: relative;
        left: calc(50% - var(--size) / 0.2);
        top: 75%;
        width: var(--size);
        height: var(--size);
        display: grid;
        place-items: center;
        animation: rot 8s linear infinite var(--state);
        cursor: pointer;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
        border-color: var(--color) transparent;
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--color);
        filter: drop-shadow(0 0 8px #000);
}

#dt1{ position: absolute; width: 110px; height: 293px; bottom: 20%; left: 80px; }
#dt2{ position: absolute; width: 241px; height: 116px; bottom: 6%; left: 0.5% }

#player::after { transform: rotate(90deg); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
<img id="dt1" src="https://xlaj.cn/assets/file/zp/20230708001738.png" alt="" />
<img id="dt2" src="https://xlaj.cn/assets/file/zp/20240907193435.png" alt="" />
        <audio id="aud" src="https://xlaj.cn/assets/file/zp/20230708001908.mp3" autoplay loop></audio>
        <div id="player" title="拖我"></div>
</div>

<script>
//变量 : 可拖曳、偏移量（小播尺寸的一半）、点击间隔时长
var draggable = false, offset = 80, time_delay = 0;
//引用全屏按钮插件+配置
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
        papa: '#tz',
        css: 'left: 50%; bottom: 20px; --fsBg: transparent; --color: white;',
});
//播放控件联动监听
aud.onplaying = aud.onpause = () => tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
//小播左键按下 : 可以拖曳
player.onmousedown = (e) => {
        if(e.button != 0) return;
        time_delay = new Date().getTime();
        draggable = true;
        player.style.transition = '0s';
}
//小播左键弹起 : 点击或拖曳
player.onmouseup = (e) => {
        if(e.button != 0) return;
        time_delay = new Date().getTime() - time_delay;
        if(time_delay < 200) aud.paused ? aud.play() : aud.pause();
        time_delay = 0;
};
//帖子容器左键按下 : 拖曳
tz.onmousemove = (e) => {
        if(!draggable) return;
        var rt = tz.getBoundingClientRect();
        let left = e.clientX - rt.left - offset, top = e.clientY - rt.top - offset;
        if(left < 0) left = 0;
        if(top < 0) top = 0;
        if(left > rt.width - offset * 2) left = rt.width - offset * 2;
        if(top > rt.height - offset * 2) top = rt.height - offset * 2;
        player.style.cssText += `left: ${left}px; top: ${top}px;`;
};
document.onmouseup = () => draggable = false; //禁止拖曳
//窗口改变大小 : 小播复位
window.onresize = () => player.style.cssText += `left: calc(50% - var(--size) / 0.2); top: 75%; transition: .7s;`;
</script>
<br><br><br><br>

小辣椒 发表于 2024-9-7 19:54

@走过岁月

继续送岁月{:4_189:}反正都是你的东西做的

小辣椒 发表于 2024-9-7 19:55

@马黑黑

黑黑这个我也是套用的，只是全屏欣赏我修改了尺寸，还原没有到原点，不知道哪里错了

朵拉 发表于 2024-9-7 19:57

送礼的和收礼的 都开心哈{:4_204:}

马黑黑 发表于 2024-9-7 19:58

小辣椒 发表于 2024-9-7 19:55
@马黑黑

黑黑这个我也是套用的，只是全屏欣赏我修改了尺寸，还原没有到原点，不知道哪里错了

最后一句：

window.onresize = () => player.style.cssText += `left: calc(50% - var(--size) / 0.2); top: 75%; transition: .7s;`;

0.2 应该是 2，你克扣了俺大部分工资{:4_170:}

走过岁月 发表于 2024-9-7 20:02

小辣椒 发表于 2024-9-7 19:54
@走过岁月

继续送岁月反正都是你的东西做的

来了，小辣椒也是花心思做的

走过岁月 发表于 2024-9-7 20:03

好美，小辣椒的设计到位巧妙

走过岁月 发表于 2024-9-7 20:03

萨克斯音乐很好听，经典音乐好听

走过岁月 发表于 2024-9-7 20:04

谢谢小辣椒，抱抱 {:4_179:}

小辣椒 发表于 2024-9-7 20:10

马黑黑 发表于 2024-9-7 19:58
最后一句：

window.onresize = () => player.style.cssText += `left: calc(50% - var(--size) / 0.2) ...

问题我上面是0.2的，下面不要修改？

樵歌 发表于 2024-9-7 20:10

画面有江面韵味，音乐也颇柔情的感觉。

小辣椒 发表于 2024-9-7 20:11

走过岁月 发表于 2024-9-7 20:02
来了，小辣椒也是花心思做的

岁月来了，都是你的东东做的

梦油 发表于 2024-9-7 20:11

谢谢小辣椒朋友。在管乐器里，我最喜欢的就是萨克斯，只是现在年纪大了，底气跟不上了。
萨克斯的音色柔和、圆润、富有表现力。它可以产生出浪漫、抒情的音色乐曲，听起来很酷很甜美。

小辣椒 发表于 2024-9-7 20:11

朵拉 发表于 2024-9-7 19:57
送礼的和收礼的 都开心哈

朵拉好，谢谢欣赏{:4_171:}

小辣椒 发表于 2024-9-7 20:12

走过岁月 发表于 2024-9-7 20:03
好美，小辣椒的设计到位巧妙

就你的加了个人物，前面也是玩过的{:4_173:}

小辣椒 发表于 2024-9-7 20:13

走过岁月 发表于 2024-9-7 20:03
萨克斯音乐很好听，经典音乐好听

是太好听了，我也是特别喜欢{:4_208:}

小辣椒 发表于 2024-9-7 20:15

走过岁月 发表于 2024-9-7 20:04
谢谢小辣椒，抱抱

不用谢，是岁月的原创，小辣椒只是玩的动图。来个大大的{:4_179:}

小辣椒 发表于 2024-9-7 20:16

马黑黑 发表于 2024-9-7 19:58
最后一句：

window.onresize = () => player.style.cssText += `left: calc(50% - var(--size) / 0.2) ...

黑黑，2也是不对的，距离更加远了

马黑黑 发表于 2024-9-7 20:16

小辣椒 发表于 2024-9-7 20:10
问题我上面是0.2的，下面不要修改？

那就不用改了，它就是回到那里。意思就是，你可口俺工资是铁定的了{:4_170:}

马黑黑 发表于 2024-9-7 20:17

小辣椒 发表于 2024-9-7 20:16
黑黑，2也是不对的，距离更加远了

回到CSS原先设定的地方就好

查看完整版本: 我有一段情（萨克斯风）TO：走过岁月