岩新新 发表于 2024-9-8 20:41

千百惠 - 走过咖啡屋 (DJ版)

本帖最后由 岩新新 于 2024-9-9 20:28 编辑 <br /><br /><style>
#tz {
        margin: 150px 0 30px calc(50% - 806px);
        width: 1449px;
        height: 742px;
        background: url('https://webftp-bbs.hnol.net/yx2021//pj152/1f6325a8fa9f936f4edfc47a41c118feSM.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) / 2);
        top: 20%;
        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);
}


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

<div id="tz">

        <audio id="aud" src="https://webftp-bbs.hnol.net/yx2021//pj152/6853940.swf" 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) / 2); top: 20%; transition: .7s;`;
</script>
<br><br><br><br>

小文 发表于 2024-9-8 21:18

少年时喜欢的歌

彩云归 发表于 2024-9-9 07:36

{:4_199:}谢谢分享！

红影 发表于 2024-9-9 11:11

也是可拖动的漂亮播放器按钮呢，这个背景也好美。
欣赏新新好帖{:4_199:}

小辣椒 发表于 2024-9-9 12:09

岩新这个套用很成功的，第一步就玩套用，但你这个我手机听不到音乐，现在电脑上来看看什么原因，电脑音乐出来一下就没有了，还是音乐链接问题，你是swf后缀，高版本浏览器都会听不到的

这个套用我因为是图片需要加了修改素材，你现在不需要的，而且现在的播放器遮挡了背景人物，播放器可以移动一下。我给你修改了位置，你看看代码可以对比一下效果。

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

播放器位置现在是
#player {
      --size: 120px;
      --color: #1b6590;
      position: relative;
      left: calc(50% - var(--size) / 2);
      top: 20%;   
我原来是top: 75%

小辣椒 发表于 2024-9-9 12:19

看看老师的源码分享，也是可以直接套用的

https://www.huachaowang.com/forum.php?mod=viewthread&tid=78111
页: [1]
查看完整版本: 千百惠 - 走过咖啡屋 (DJ版)