朵拉 发表于 2024-10-2 22:23

风经过（马黑黑原创）

本帖最后由 朵拉 于 2024-10-27 20:16 编辑 <br /><br /><style>
#tz {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://pic.imgdb.cn/item/66fd53a0f21886ccc0304c93.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 8px #333;
        z-index: 1;
        position: relative;
}
#player {
        --size: 122px;
        --color: yellow;
        position: relative;
        left: calc(29.2% - var(--size) / 2);
        top: 225px;
        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://www.kumeiwp.com/wj/223414/2024/10/14/8e731981221a9f43a00be3776e5f70d0.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: 35%; 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(29.2% - var(--size) / 2); top: 225px; transition: .7s;`;
</script>

朵拉 发表于 2024-10-2 22:29

本帖最后由 朵拉 于 2024-10-2 22:30 编辑

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}
另：这播放器怎么移动了，该怎么固定呢{:4_203:}

马黑黑 发表于 2024-10-2 22:39

朵拉 发表于 2024-10-2 22:29
@马黑黑
老师 晚上好，学生交作业，请指正哈
另：这播放器怎么移动了，该怎么固定呢

修改 #player 的 left 和 top

红影 发表于 2024-10-2 23:20

这个全屏后小播就跑了呢。
欣赏朵宝好帖，节日快乐{:4_187:}

朵拉 发表于 2024-10-2 23:50

马黑黑 发表于 2024-10-2 22:39
修改 #player 的 left 和 top

老师好，学生研究了一会 现在好了，请再指正哈{:4_190:}

马黑黑 发表于 2024-10-3 08:13

朵拉 发表于 2024-10-2 23:50
老师好，学生研究了一会 现在好了，请再指正哈

全屏按钮不应和播放器重叠
页: [1]
查看完整版本: 风经过（马黑黑原创）