学习代码娱乐测试003
本帖最后由 近朱者赤 于 2023-7-8 08:23 编辑 <br /><br /><style>#papa { left:-214px; width: 1024px; height: 520px; box-shadow: 3px 3px 24px #000; background: #111 linear-gradient(#FAF0E6,#FAF0E6); position: relative; }
#drawer { position: absolute; width: 1000px;; height: 520px; left: 13px; top: 0px; box-shadow: inherit; overflow: hidden; }
.mypic { position: absolute; top: -100%; width: 100%; height: 100%; transition: top 1.5s;}
#player { padding: 24px; position: absolute; left: 350px; bottom: 10px; width: fit-content; height: fit-content; display: flex; gap: 20px; flex-direction: column; }
#lrctext { font: bold 1.4em sans-serif; color: #1ABDE6; text-shadow: 1px 1px 2px #000; user-select: none; transition: all 1.5s;text-align: center;}
#btnwrap { width: fit-content; height: fit-content; display: flex; gap: 8px; align-items: center; }
#btnmain { width: 20px; height: 20px; display: grid; place-items: center; background: rgba(255,215,0,.5); border-radius: 50%; cursor: pointer; transition: all 2s; }
#btnmain:hover { background: tomato; }
#btnplay {width: 8px; height: 10px; background: #ccc; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 10px; border-style: solid; border-width: 0px 4px; border-color: transparent
#eee; display: none; }
#prgline { width: 180px; height: 4px; background: #ccc linear-gradient(to right,red,orange,green,red) no-repeat center left; background-size: 1px 4px; cursor: pointer;}
#tmsg { font: normal 10px sans-serif; color: orange; user-select: none; text-shadow: 1px 1px 1px #000; transition: 1.5s; }
#tmsg:hover, #lrctext:hover { color: tomato; }
#canvas { position: absolute;left:67px;top: 2.5px;width: 87%; height: 73%;opacity: 0.34;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
</head>
<body>
<div id="papa">
<div id="drawer"></div>
<canvas id="canvas" width="1024" height="340"></canvas>
<div id="player">
<div id="lrctext">lrc歌词</div>
<div id="btnwrap">
<span id="btnmain"><span id="btnplay"></span><span id="btnpause"></span></span>
<span id="prgline"></span><span id="tmsg">00:00 | 00:00</span>
</div>
</div>
</div>
<script>
let step = 1, start = 0, ani = 100, last;
let pics = [
'https://pic.imgdb.cn/item/62ff97b616f2c2beb157728f.jpg',
'https://pic.imgdb.cn/item/62ff97db16f2c2beb1579109.jpg',
'https://pic.imgdb.cn/item/62ff97fc16f2c2beb1580ac8.jpg',
'https://pic.imgdb.cn/item/62ff982216f2c2beb15836a1.jpg',
'https://pic.imgdb.cn/item/62ff984416f2c2beb1584712.jpg',
'https://pic.imgdb.cn/item/62ff986516f2c2beb15860db.jpg',
];
for(pic of pics) {
let ele = document.createElement('img');
ele.src = pic;
ele.alt = '';
ele.title = pic;
ele.className = 'mypic';
drawer.appendChild(ele);
}
let picAr = document.querySelectorAll('.mypic');
picAni(0, picAr.length - 1);
let timer = setInterval(() => { picAni(0, picAr.length - 1); },10000);
function picAni(n1, n2) {
if(last != undefined) picAr.style.top= ani + '%';
let temp = start;
last = temp;
ani = step < 0 ? -100 : 100;
picAr.style.top = '0%';
start += step;
if(start == n1 || start == n2) step = -step;
}
function project3D(x, y, z, vars) {
var p, d;
x -= vars.camX;
y -= vars.camY - 8;
z -= vars.camZ;
p = Math.atan2(x, z);
d = Math.sqrt(x * x + z * z);
x = Math.sin(p - vars.yaw) * d;
z = Math.cos(p - vars.yaw) * d;
p = Math.atan2(y, z);
d = Math.sqrt(y * y + z * z);
y = Math.sin(p - vars.pitch) * d;
z = Math.cos(p - vars.pitch) * d;
var rx1 = -1000;
var ry1 = 1;
var rx2 = 1000;
var ry2 = 1;
var rx3 = 0;
var ry3 = 0;
var rx4 = x;
var ry4 = z;
var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);
var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;
var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;
if (!z) z = 0.000000001;
if (ua > 0 && ua < 1 && ub > 0 && ub < 1) {
return {
x: vars.cx + (rx1 + ua * (rx2 - rx1)) * vars.scale,
y: vars.cy + y / z * vars.scale,
d: (x * x + y * y + z * z)
}
} else {
return {
d: -1
}
}
}
function elevation(x, y, z) {
var dist = Math.sqrt(x * x + y * y + z * z);
if (dist && z / dist >= -1 && z / dist <= 1) return Math.acos(z / dist);
return 0.00000001
}
function rgb(col) {
col += 0.000001;
var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);
var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);
var b = parseInt((0.5 - Math.sin(col) * 0.5) * 16);
return "#" + r.toString(16) + g.toString(16) + b.toString(16)
}
function interpolateColors(RGB1, RGB2, degree) {
var w2 = degree;
var w1 = 1 - w2;
return + w2 * RGB2, w1 * RGB1 + w2 * RGB2, w1 * RGB1 + w2 * RGB2]
}
function rgbArray(col) {
col += 0.000001;
var r = parseInt((0.5 + Math.sin(col) * 0.5) * 256);
var g = parseInt((0.5 + Math.cos(col) * 0.5) * 256);
var b = parseInt((0.5 - Math.sin(col) * 0.5) * 256);
return
}
function colorString(arr) {
var r = parseInt(arr);
var g = parseInt(arr);
var b = parseInt(arr);
return "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2)
}
function process(vars) {
if (vars.points.length < vars.initParticles)
for (var i = 0; i < 5; ++i) spawnParticle(vars);
var p, d, t;
p = Math.atan2(vars.camX, vars.camZ);
d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
d -= Math.sin(vars.frameNo / 80) / 25;
t = Math.cos(vars.frameNo / 300) / 165;
vars.camX = Math.sin(p + t) * d;
vars.camZ = Math.cos(p + t) * d;
vars.camY = -Math.sin(vars.frameNo / 220) * 15;
vars.yaw = Math.PI + p + t;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
var t;
for (var j = 0; j < vars.points.length; ++j) {
x = vars.points.x;
y = vars.points.y;
z = vars.points.z;
d = Math.sqrt(x * x + z * z) / 1.0075;
t = .1 / (1 + d * d / 5);
p = Math.atan2(x, z) + t;
vars.points.x = Math.sin(p) * d;
vars.points.z = Math.cos(p) * d;
vars.points.y += vars.points.vy * t * ((Math.sqrt(vars.distributionRadius) - d) * 2);
if (vars.points.y > vars.vortexHeight / 2 || d < .25) {
vars.points.splice(j, 1);
spawnParticle(vars)
}
}
}
function drawFloor(vars) {
var x, y, z, d, point, a;
for (var i = -25; i <= 25; i += 1) {
for (var j = -25; j <= 25; j += 1) {
x = i * 2;
z = j * 2;
y = vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y - d * d / 85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a > 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d / 26 - vars.frameNo / 40), , .5 + Math.sin(d / 6 - vars.frameNo / 8) / 2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size)
}
}
}
}
vars.ctx.fillStyle = "#82f";
for (var i = -25; i <= 25; i += 1) {
for (var j = -25; j <= 25; j += 1) {
x = i * 2;
z = j * 2;
y = -vars.floor;
d = Math.sqrt(x * x + z * z);
point = project3D(x, y + d * d / 85, z, vars);
if (point.d != -1) {
size = 1 + 15000 / (1 + point.d);
a = 0.15 - Math.pow(d / 50, 4) * 0.15;
if (a > 0) {
vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d / 26 - vars.frameNo / 40), , .5 + Math.sin(-d / 6 - vars.frameNo / 8) / 2));
vars.ctx.globalAlpha = a;
vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size)
}
}
}
}
}
function sortFunction(a, b) {
return b.dist - a.dist;
}
function draw(vars) {
vars.ctx.globalAlpha = .15;
vars.ctx.fillStyle = "#000";
vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
drawFloor(vars);
var point, x, y, z, a;
for (var j = 0; j < vars.points.length; ++j) {
x = vars.points.x;
y = vars.points.y;
z = vars.points.z;
point = project3D(x, y, z, vars);
if (point.d != -1) {
vars.points.dist = point.d;
size = 1 + vars.points.radius / (1 + point.d);
d = Math.abs(vars.points.y);
a = .8 - Math.pow(d / (vars.vortexHeight / 2), 1000) * .8;
vars.ctx.globalAlpha = a >= 0 && a <= 1 ? a : 0;
vars.ctx.fillStyle = rgb(vars.points.color);
if (point.x > -1 && point.x < vars.canvas.width && point.y > -1 && point.y < vars.canvas.height) vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size)
}
}
vars.points.sort(sortFunction)
}
function spawnParticle(vars) {
var p, ls;
pt = {};
p = Math.PI * 2 * Math.random();
ls = Math.sqrt(Math.random() * vars.distributionRadius);
pt.x = Math.sin(p) * ls;
pt.y = -vars.vortexHeight / 2;
pt.vy = vars.initV / 20 + Math.random() * vars.initV;
pt.z = Math.cos(p) * ls;
pt.radius = 200 + 800 * Math.random();
pt.color = pt.radius / 1000 + vars.frameNo / 250;
vars.points.push(pt)
}
function frame(vars) {
if (vars === undefined) {
var vars = {};
vars.canvas = document.querySelector("canvas");
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = papa.clientWidth;
vars.canvas.height = papa.clientHeight;
window.addEventListener("resize", function() {
vars.canvas.width = papa.clientWidth;
vars.canvas.height = papa.clientHeight;
vars.cx = vars.canvas.width / 2;
vars.cy = vars.canvas.height / 2
}, true);
vars.frameNo = 0;
vars.camX = 0;
vars.camY = 0;
vars.camZ = -14;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
vars.yaw = 0;
vars.cx = vars.canvas.width / 2;
vars.cy = vars.canvas.height / 2;
vars.bounding = 10;
vars.scale = 500;
vars.floor = 26.5;
vars.points = [];
vars.initParticles = 800;
vars.initV = .01;
vars.distributionRadius = 500;
vars.vortexHeight = 25
}
vars.frameNo++;
requestAnimationFrame(function() {
frame(vars);
});
process(vars);
draw(vars)
}
frame();
let lrcAr = [
['0.02','孤勇者- 陈奕迅'],
['12.02','学习马黑黑彩虹进度条'],
['22.02','都是勇敢的'],
['28.04','你额头的伤口你的不同你犯的错'],
['36.10','都不必隐藏'],
['43.04','你破旧的玩偶你的面具你的自我'],
['51.06','他们说要带着光驯服每一头怪兽'],
['58.07','他们说要缝好你的伤没有人爱小丑'],
['65.08','为何孤独不可光荣'],
['69.01','人只有不完美值得歌颂'],
['73.03','谁说污泥满身的不算英雄'],
['80.08','爱你孤身走暗巷'],
['82.06','爱你不跪的模样'],
['84.05','爱你对峙过绝望'],
['86.03','不肯哭一场'],
['88.02','爱你破烂的衣裳'],
['89.10','却敢堵命运的枪'],
['91.09','爱你和我那么像'],
['93.08','缺口都一样'],
['95.06','去吗 配吗 这褴褛的披风'],
['99.04','战吗 战啊 以最卑微的梦'],
['103.00','致那黑夜中的呜咽与怒吼'],
['110.02','谁说站在光里的才算英雄'],
['128.06','他们说要戒了你的狂'],
['131.06','就像擦掉了污垢'],
['136.01','他们说要顺台阶而上而代价是低头'],
['143.04','那就让我不可乘风'],
['146.05','你一样骄傲着那种孤勇'],
['150.09','谁说对弈平凡的不算英雄'],
['158.04','爱你孤身走暗巷'],
['160.02','爱你不跪的模样'],
['161.10','爱你对峙过绝望'],
['163.09','不肯哭一场'],
['165.07','爱你破烂的衣裳'],
['167.06','却敢堵命运的枪'],
['169.04','爱你和我那么像'],
['171.03','缺口都一样'],
['173.02','去吗 配吗 这褴褛的披风'],
['176.08','战吗 战啊 以最卑微的梦'],
['180.05','致那黑夜中的呜咽与怒吼'],
['187.08','谁说站在光里的才算英雄'],
['192.07','你的斑驳与众不同'],
['199.09','你的沉默震耳欲聋'],
['205.08','You Are The Hero'],
['206.06','爱你孤身走暗巷'],
['208.02','爱你不跪的模样'],
['209.09','爱你对峙过绝望'],
['211.08','不肯哭一场 (You Are The Hero)'],
['213.09','爱你来自于蛮荒'],
['215.05','一生不借谁的光'],
['217.03','你将造你的城邦'],
['219.02','在废墟之上'],
['221.02','去吗 去啊 以最卑微的梦'],
['224.08','战吗 战啊 以最孤高的梦'],
['228.05','致那黑夜中的呜咽与怒吼'],
['235.08','谁说站在光里的才算英雄']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1985221664.mp3';
aud.autoplay = true;
aud.loop = true;
btnmain.onclick = () => aud.paused ? aud.play() : aud.pause();
prgline.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prgline.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
prgline.style.backgroundSize = prgline.offsetWidth * aud.currentTime / aud.duration + 'px 4px';
tmsg.innerText = toMin(aud.duration) + ' | ' + toMin(aud.currentTime);
for(j=0; j<lrcAr.length; j++) {
if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
}
});
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
好像结尾代码有点问题的。 绚丽漩涡效果加图片滚动效果，二合一呢。很赞。只是代码貌似有问题，让论坛界面变形了呢{:4_187:} {:4_199:}
页:
[1]