A Long Story

马黑黑

马黑黑

帖子代码

<style>
#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); } }
</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>

马黑黑

本帖：

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

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

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

小辣椒

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

小辣椒

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

小辣椒

感谢黑黑的精彩分享

马黑黑

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

马黑黑

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

梦江南

谢谢老师分享，辛苦了！

樵歌

每天都有新作，辛苦了

马黑黑

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

手掌辛苦！

朵拉

好看，学习下

马黑黑

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

世外桃源

欣赏欣赏

世外桃源

好作品，赞！

红影

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

红影

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

马黑黑

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

上午好