|
|

楼主 |
发表于 2023-7-9 17:38
|
显示全部楼层
帖子代码(Lizi类应用)
- <style>
- #mydiv {
- margin: 20px auto;
- width: 1024px;
- height: 678px;
- z-index: 1;
- background: url('https://638183.freep.cn/638183/t23/2/gvrf.jpg');
- box-shadow: 0 0 8px 0 #000;
- overflow: hidden;
- position: relative;
- }
- li-zi {
- position: absolute;
- border-radius: 100% 100% 100% 0;
- background: lightblue;
- box-shadow: inset -2px -2px 10px 0 antiquewhite;
- opacity: .9;
- cursor: pointer;
- transform: rotate(-45deg);
- }
- </style>
- <div id="mydiv"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1847758043" autoplay="autoplay" loop="loop"></audio>
- <script>
- //粒子运动开关
- let canMove = true;
- //创建 Lizi 类
- class Lizi {
- //构造函数 : 属性设计/设置 pa - 粒子宿主元素,size - 粒子大小
- constructor(pa,size = 20) {
- this.pa = pa;
- this.size = size;
- this.bg = 'purple';
- this.left = 10;
- this.top = 10;
- this.ystep = 1; //垂直移动步幅
- this.ele = document.createElement('li-zi'); //粒子标签
- }
- //创建粒子
- creating() {
- this.ele.style.cssText = `
- width: ${this.size}px;
- height: ${this.size}px;
- left: ${this.left}px;
- top: ${this.top}px;
- background: ${this.bg};
- `;
- this.pa.appendChild(this.ele);
- this.moving();
- }
- //移动粒子
- moving() {
- if(canMove) {
- this.left += this.xstep;
- this.top += this.ystep;
- if(this.top <= -this.size) this.top = this.pa.offsetHeight;
- this.ele.style.left = this.left + 'px';
- this.ele.style.top = this.top + 'px';
- }
- requestAnimationFrame(this.moving.bind(this));
- }
- }
- //实例化Lizi
- Array.from({length: 40}).forEach((element) => {
- element = new Lizi(mydiv);
- element.size = 20 + Math.ceil(Math.random() * 20);
- element.left = Math.floor(Math.random() * (mydiv.offsetWidth - element.size));
- element.top = Math.floor(Math.random() * (mydiv.offsetHeight - element.size));
- element.xstep = 0;
- element.ystep = -0.5 - Math.random();
- element.bg = '#' + Math.random().toString(16).substr(-6);
- element.creating();
- });
- mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),canMove = false) : (mydiv.style.setProperty('--state','running'),canMove = true);
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
|