源码小屋

凡哥

2024年9月6日 星期五

水

<style>
#tz {
	margin: 30px 0 30px calc(50% - 730px);
	position: relative;
	width: 1280px;
	height: 700px;
	background: url('https://638183.freep.cn/638183/t24/4/water.jpg') no-repeat center/cover;
	box-shadow: 4px 4px 10px #000;
	user-select: none;
	z-index: 1;
}
#player {
	left: 45%;
	top: 40px;
	width: 160px;
	height: 200px;
	display: grid;
	place-items: center;
	cursor: pointer;
	animation: rot linear 8s infinite var(--state);
	position: absolute;;
}
#player::after {
	position: absolute;
	content: '';
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: linear-gradient(orange,cyan);
}
#vid {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
	opacity: .5;
	mix-blend-mode: screen;
	-webkit-mask: linear-gradient(transparent 20%, red 25%, red 0);
}
.ellipse {
	--deg: 0deg;
	position: absolute;
	width: 50%;
	height: 20%;
	background: #ff003380;
	border: 2px solid cyan;
	border-radius: 0  100%  25% 50%;
	filter: drop-shadow(0 0 16px #fff);
	transform: rotate(var(--deg)) translateX(-40px);
}
@keyframes rot { to { transform: rotate(-1turn); filter: hue-rotate(360deg); } }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=460793376" autoplay loop></audio>
	<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/20/12/29/13/53/31/video5feac45b722c5.mp4" autoplay loop muted></video>
	<div id="player" draggable="true" title="支持拖曳"></div>
</div>

<script>
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: 20px; bottom: 20px; --fsBg: transparent; --color: white;', 
});
Array(total = 6).fill('').forEach((elm,idx) => {
	elm = document.createElement('span');
	elm.className = 'ellipse';
	elm.style.cssText += `
		--deg: ${360 / total * idx}deg;
		background: #${Math.random().toString(16).substring(2,8)}a0;
	`;
	player.appendChild(elm);
});
mState = () => {
	tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
	aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
player.ondragend = (e) => {
	var rect = tz.getBoundingClientRect();
	var left = e.clientX - rect.left - 80, top = e.clientY - rect.top - 80;
	if(left < 0) left = 0;
	if(left > rect.width - 160) left = rect.width - 160;
	if(top < 0) top = 0;
	if(top > rect.height - 160) top = rect.height - 160;
	player.style.left = left + 'px';
	player.style.top = top + 'px';
};
tz.ondragover = (e) => e.preventDefault();
</script>

花简静

拖曳我

花简静

试了下我的视频拖不动

凡哥

花简静 发表于 2024-9-6 22:14
试了下我的视频拖不动

注意看 video 的CSS设置，里面有一个 pointer-events 属性，它用来设置是否接受指针操作，缺省是接受，设置为none是不接受，意思是，想拖曳视频，这个属性不要或设为 auto

凡哥

2024年9月7日 星期六

A Long Stroy

<style>
#tz {
	margin: 30px 0 30px calc(50% - 602px);
	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>

花简静

凡哥 发表于 2024-9-7 10:59
注意看 video 的CSS设置，里面有一个 pointer-events 属性，它用来设置是否接受指针操作，缺省是接受，设 ...

原来如此，我马上就改改

花简静

凡哥 发表于 2024-9-7 10:59
注意看 video 的CSS设置，里面有一个 pointer-events 属性，它用来设置是否接受指针操作，缺省是接受，设 ...

哈哈，视频也可以到处拖着走了。。。。
开心ING..

花简静

凡哥 发表于 2024-9-7 11:02
2024年9月7日 星期六
A Long Stroy

贴子跟完了，又好看好玩。。

凡哥

花简静 发表于 2024-9-7 17:10
贴子跟完了，又好看好玩。。

图标有点新鲜感

花简静

凡哥 发表于 2024-9-7 18:42
图标有点新鲜感

今天这个图标有镂空，就很新鲜。。。能互动拖着玩就更新鲜。。