论坛 › 动画音画 › A Long Story

马黑黑 发表于 2024-9-7 10:47

A Long Story

本帖最后由 马黑黑 于 2024-9-7 20:09 编辑 <br /><br /><style>
#tz {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://638183.freep.cn/638183/t24/webp2/longstory.webp') no-repeat center/cover;
        box-shadow: 4px 4px 8px #333;
        z-index: 1;
        position: relative;
}
#player {
        --size: 160px;
        --color: teal;
        position: relative;
        left: calc(50% - var(--size) / 2);
        top: 20px;
        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://music.163.com/song/media/outer/url?id=1331217821" 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(50% - var(--size) / 2); top: 20px; transition: .7s;`;
</script>

马黑黑 发表于 2024-9-7 10:48

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#tz {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://puui.qpic.cn/vpic_cover/q3507aim6o9/q3507aim6o9_1679815791_hz.jpg/1280') no-repeat center/cover;
        box-shadow: 4px 4px 8px #333;
        z-index: 1;
        position: relative;
}
#player {
        --size: 160px;
        --color: teal;
        position: relative;
        left: calc(50% - var(--size) / 2);
        top: 20px;
        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); } }
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1331217821" autoplay loop&gt;&lt;/audio&gt;
        &lt;div id="player" title="拖我"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
//变量 : 可拖曳、偏移量（小播尺寸的一半）、点击间隔时长
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 = () =&gt; FS({
        papa: '#tz',
        css: 'left: 35%; bottom: 20px; --fsBg: transparent; --color: white;',
});
//播放控件联动监听
aud.onplaying = aud.onpause = () =&gt; tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
//小播左键按下 : 可以拖曳
player.onmousedown = (e) =&gt; {
        if(e.button != 0) return;
        time_delay = new Date().getTime();
        draggable = true;
        player.style.transition = '0s';
}
//小播左键弹起 : 点击或拖曳
player.onmouseup = (e) =&gt; {
        if(e.button != 0) return;
        time_delay = new Date().getTime() - time_delay;
        if(time_delay &lt; 200) aud.paused ? aud.play() : aud.pause();
        time_delay = 0;
};
//帖子容器左键按下 : 拖曳
tz.onmousemove = (e) =&gt; {
        if(!draggable) return;
        var rt = tz.getBoundingClientRect();
        let left = e.clientX - rt.left - offset, top = e.clientY - rt.top - offset;
        if(left &lt; 0) left = 0;
        if(top &lt; 0) top = 0;
        if(left &gt; rt.width - offset * 2) left = rt.width - offset * 2;
        if(top &gt; rt.height - offset * 2) top = rt.height - offset * 2;
        player.style.cssText += `left: ${left}px; top: ${top}px;`;
};
document.onmouseup = () =&gt; draggable = false; //禁止拖曳
//窗口改变大小 : 小播复位
window.onresize = () =&gt; player.style.cssText += `left: calc(50% - var(--size) / 2); top: 20px; transition: .7s;`;
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-9-7 10:55

本帖：

小播的移动采用传统方式实现，即通过监听 mouse* 系列事件确定小播的拖曳位置。同时，全屏与常规显示模式切换时令小播复位，复位过程可看到小播的运行路径。

用 mouse* 事件实现拖曳需要处理单击和拖曳功能的冲突，本帖JS代码已经解决了这个问题，我会在我的站点发布一篇短文讨论这个问题。

小播的绘制工作使用 CSS+HTML 代码完成，使用伪元素做外观，具体实现方式是伪元素的 border* 属性设置。

醉美水芙蓉 发表于 2024-9-7 11:39

醉美水芙蓉 发表于 2024-9-7 11:40

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

这个可以画面携拉的播放器黑黑这么快就出来了，速度啊{:4_199:}

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

这个播放器玩音画的朋友肯定喜欢的，大图上播放器可以随便拖动，效果特别棒的

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

感谢黑黑的精彩分享{:4_187:}

马黑黑 发表于 2024-9-7 12:18

醉美水芙蓉 发表于 2024-9-7 11:40
老师这个播放器真精致！

{:4_190:}

马黑黑 发表于 2024-9-7 12:18

小辣椒 发表于 2024-9-7 11:51
感谢黑黑的精彩分享

{:4_190:}

梦江南 发表于 2024-9-7 13:38

谢谢老师分享，辛苦了！{:4_180:}

樵歌 发表于 2024-9-7 19:35

每天都有新作，辛苦了{:4_190:}

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

樵歌 发表于 2024-9-7 19:35
每天都有新作，辛苦了

手掌辛苦！

朵拉 发表于 2024-9-7 20:01

好看，学习下{:4_204:}

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

朵拉 发表于 2024-9-7 20:01
好看，学习下

{:4_191:}

世外桃源 发表于 2024-9-8 11:19

欣赏欣赏

世外桃源 发表于 2024-9-8 11:19

好作品，赞！

红影 发表于 2024-9-9 08:40

可拖曳的播放器，自己想放哪就能手动把播放器放到哪去了，如此有趣的互动效果{:4_199:}

红影 发表于 2024-9-9 08:43

纯代码绘制的播放器很漂亮，而且尺寸和颜色都可以统一调整。这个只有满屏是封装的，其他的都没封，可以看得更仔细更便于学习了。
背景很童趣，充满想象{:4_199:}

马黑黑 发表于 2024-9-9 09:11

红影 发表于 2024-9-9 08:40
可拖曳的播放器，自己想放哪就能手动把播放器放到哪去了，如此有趣的互动效果

上午好

查看完整版本: A Long Story