马黑黑 发表于 2023-12-20 21:07

花间辞

<style>
#papa {
        margin: 0 0 0 calc(50% - 875px);
        display: grid;
        place-items: center;
        width: 1587px;
        height: 844px;
        background: url('https://638183.freep.cn/638183/t23/webp2/hxjmci.webp');
        overflow: hidden;
        position: relative;
        z-index: 1;
}
video {
        position: absolute;
        top: -76px;
        width: 1587px;
        height: 920px;
        object-fit: cover;
        opacity: .75;
}
</style>

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
</div>

<script>
(function() {

const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        const myplayer = new mPlayer();
        myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=416892154');
        myplayer.setBtnCss(`
                background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
                bottom: 20px;
        `);
        myplayer.setLrcCss('top:20px; left:20px; color: tan; --bg: orange;');
        myplayer.lrcAr = [];
};

})();
</script>

马黑黑 发表于 2023-12-20 21:08

帖子代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 875px);
        display: grid;
        place-items: center;
        width: 1587px;
        height: 844px;
        background: url('https://638183.freep.cn/638183/t23/webp2/hxjmci.webp');
        overflow: hidden;
        position: relative;
}
video {
        position: absolute;
        top: -76px;
        width: 1587px;
        height: 920px;
        object-fit: cover;
        opacity: .75;
}
</style>

<div id="papa">
        <video src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67af3447155.mp4" autoplay loop muted></video>
</div>

<script>
const sf = document.createElement('script');
sf.src = 'https://638183.freep.cn/638183/web/api/mplayer.js';
sf.charset = 'utf-8';
document.body.appendChild(sf);

sf.onload = () => {
        const myplayer = new mPlayer();
        myplayer.setAudSrc('https://music.163.com/song/media/outer/url?id=416892154');
        myplayer.setBtnCss(`
                background: url('https://638183.freep.cn/638183/t23/btn/meihua.png') no-repeat center/cover;
                bottom: 20px;
        `);
        myplayer.setLrcCss('top:20px; left:20px; color: tan; --bg: orange;');
        myplayer.lrcAr = [];
};
</script>

梦油 发表于 2023-12-20 21:11

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

马黑黑 发表于 2023-12-20 21:13

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

谢谢鼓励

醉美水芙蓉 发表于 2023-12-20 21:19

红影 发表于 2023-12-20 21:43

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

红影 发表于 2023-12-20 21:49

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

马黑黑 发表于 2023-12-20 22:05

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

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

马黑黑 发表于 2023-12-20 22:06

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

晚上好

马黑黑 发表于 2023-12-20 22:06

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

歌词就是文字呀

亦是金 发表于 2023-12-20 22:19

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

世外桃源 发表于 2023-12-20 22:24

谢谢老师分享，学习了再说{:4_187:}

红影 发表于 2023-12-20 22:32

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

黑黑的插件越来越让做帖子变得简洁呢{:4_199:}

红影 发表于 2023-12-20 22:33

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

我用错词了，是用歌词做标题{:4_173:}

马黑黑 发表于 2023-12-20 22:59

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

这个之前也用过的

马黑黑 发表于 2023-12-20 23:02

红影 发表于 2023-12-20 22:32
黑黑的插件越来越让做帖子变得简洁呢
这个其实是基于ES6的类。类可以封装对象，对象包含属性、方法等等。这就是基于对象编程：这个组件，封装一个自带UI的mPlayer对象，这个对象集合了诸多属性和方法，并向外公开，从而可以在外部使用且可以对之进行个性化配置。

马黑黑 发表于 2023-12-20 23:04

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

{:4_191:}

马黑黑 发表于 2023-12-20 23:04

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

效果差不多的

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

{:4_176:}{:4_176:}{:4_176:}

马黑黑 发表于 2023-12-21 11:51

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


喝多了{:4_170:}
页: [1] 2 3 4 5
查看完整版本: 花间辞