|
|

楼主 |
发表于 2023-10-22 08:08
|
显示全部楼层
帖子代码
- <style>
- #papa {
- margin: 0 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/webp2/005.webp') no-repeat center/cover;
- box-shadow: 3px 3px 20px #000;
- overflow: hidden;
- z-index: 1;
- position: relative;
- display: grid;
- place-items: center;
- }
- </style>
- <div id="papa"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2085110548" autoplay loop></audio>
- <script>
- (function() {
- let loadJs = (url,callback) => {
- let body = document.querySelector('body'), jsNode = document.createElement('script');
- jsNode.charset = 'utf-8';
- jsNode.setAttribute('src', url);
- body.appendChild(jsNode);
- jsNode.onload = () => callback();
- };
- let rippleJs = 'https://638183.freep.cn/638183/web/svg/ripple-min.js',
- playerJs = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js';
- let lrcAr = [[2,"似水年华",2],[6,"水波纹点击效果测试",2],[12,"ripple封装 :张鑫旭",1]];
- loadJs(rippleJs, () => rippleEffect(papa));
-
- loadJs(playerJs, () => {
- HCPlayer({
- papa: '#papa',
- lrcAr: lrcAr,
- lrc_css: 'top: 20px;',
- fs_css: 'top: -1000px; background: transparent;',
- player_css: `
- width: 200px;
- height: 200px;
- right: 100px;
- bottom: 40px;
- background: url('https://638183.freep.cn/638183/t23/btn/12f.png') -5px 1px,
- `,
- path: 'M10 100 A90 80 0 1 1 190 100 A90 80 0 1 1 10 100',
- btn: {left: 34, top: 80},
- track: {track: 'pink', prog: 'steelblue'},
- img: {play: '', pause: ''}
- });
- });
- })();
- </script>
复制代码
|
|