花间辞

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 875px);
   
4.         display: grid;
   
5.         place-items: center;
   
6.         width: 1587px;
   
7.         height: 844px;
   
8.         background: url('https://638183.freep.cn/638183/t23/webp2/hxjmci.webp');
   
9.         overflow: hidden;
   
10.         position: relative;
    
11. }
    
12. video {
    
13.         position: absolute;
    
14.         top: -76px;
    
15.         width: 1587px;
    
16.         height: 920px;
    
17.         object-fit: cover;
    
18.         opacity: .75;
    
19. }
    
20. </style>
    
21. 
    
22. <div id="papa">
    
23.         <video src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
    
24. </div>
    
25. 
    
26. <script>
    
27. const sf = document.createElement('script');
    
28. sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
    
29. sf.charset = 'utf-8';
    
30. document.body.appendChild(sf);
    
31. 
    
32. sf.onload = () => {
    
33.         const myplayer = new mPlayer();
    
34.         myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=416892154');
    
35.         myplayer.setBtnCss(`
    
36.                 background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
    
37.                 bottom: 20px;
    
38.         `);
    
39.         myplayer.setLrcCss('top:20px; left:20px; color: tan; --bg: orange;');
    
40.         myplayer.lrcAr = [[2,'胡寒 - 花间辞',10]];
    
41. };
    
42. </script>

复制代码

梦油

黑黑先生的制作独树一帜、很有新意。

马黑黑

梦油 发表于 2023-12-20 21:11
黑黑先生的制作独树一帜、很有新意。

谢谢鼓励

红影

这个是用歌词当文字呢。漫天大雪，真漂亮的制作

红影

音乐好听，忍不住听了几遍。音乐和按钮都可以放在JS里啊，这个好

马黑黑

红影 发表于 2023-12-20 21:49
音乐好听，忍不住听了几遍。音乐和按钮都可以放在JS里啊，这个好

对，都在“后台”完成，“前台”做简单配置就行

马黑黑

醉美水芙蓉 发表于 2023-12-20 21:19
欣赏黑黑老师精彩音画！

晚上好

马黑黑

红影 发表于 2023-12-20 21:43
这个是用歌词当文字呢。漫天大雪，真漂亮的制作

歌词就是文字呀

亦是金

黑黑老师又有新教材分享，得抓紧学习领悟试帖了！老师辛苦了！

世外桃源

谢谢老师分享，学习了再说

红影

马黑黑 发表于 2023-12-20 22:05
对，都在“后台”完成，“前台”做简单配置就行

黑黑的插件越来越让做帖子变得简洁呢

红影

马黑黑 发表于 2023-12-20 22:06
歌词就是文字呀

我用错词了，是用歌词做标题

马黑黑

红影 发表于 2023-12-20 22:33
我用错词了，是用歌词做标题

这个之前也用过的

马黑黑

红影 发表于 2023-12-20 22:32
黑黑的插件越来越让做帖子变得简洁呢

这个其实是基于ES6的类。类可以封装对象，对象包含属性、方法等等。这就是基于对象编程：这个组件，封装一个自带UI的mPlayer对象，这个对象集合了诸多属性和方法，并向外公开，从而可以在外部使用且可以对之进行个性化配置。

马黑黑

世外桃源 发表于 2023-12-20 22:24
谢谢老师分享，学习了再说

马黑黑

亦是金 发表于 2023-12-20 22:19
黑黑老师又有新教材分享，得抓紧学习领悟试帖了！老师辛苦了！

效果差不多的

焱鑫磊

马黑黑

焱鑫磊 发表于 2023-12-21 10:40

喝多了