山鬼
<style>#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t23/1/sg16.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; z-index: 1; }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1307491226.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = { player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', playerCode: `<style>#mplayer {position: absolute;display: flex;align-items: center;gap: 6px;opacity: 0;transition: opacity .75s;--ww: 40px;--state: paused;--bg: black;--border: snow;}#btnplay {background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}#btnMsg { color: var(--border); background: var(--bg); border: 2px solid var(--border); border-radius: 8px; font: normal 15px sans-serif; padding: 3px; cursor: pointer; }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="mplayer"><span id="btnplay"></span><span id="btnMsg">全屏观赏</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);let timerId, fs = false;papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);mplayer.style.opacity = '.95';timerId = setTimeout('mplayer.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({
player_css: 'left: 10px; bottom: 10px; --ww: 40px; --bg: green; border: --snow;',
});
})();
</script>
代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t23/1/sg16.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; z-index: 1; }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1307491226.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = { player_css: 'bottom: 20px; left: calc(50% - var(--ww) / 2);', playerCode: `<style>#mplayer {position: absolute;display: flex;align-items: center;gap: 6px;opacity: 0;transition: opacity .75s;--ww: 40px;--state: paused;--bg: black;--border: snow;}#btnplay {background: conic-gradient(red,orange,yellow,green,teal,blue,purple);mask: radial-gradient(transparent 3px,red 0);-webkit-mask: radial-gradient(transparent 3px,red 0);border-radius: 50%;width: var(--ww);height: var(--ww);cursor: pointer;animation: rot linear 3s infinite;animation-play-state: var(--state);}#btnMsg { color: var(--border); background: var(--bg); border: 2px solid var(--border); border-radius: 8px; font: normal 15px sans-serif; padding: 3px; cursor: pointer; }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="mplayer"><span id="btnplay"></span><span id="btnMsg">全屏观赏</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);let timerId, fs = false;papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');btnMsg.onclick = () => fs ? document.exitFullscreen() : papa.requestFullscreen();papa.onmousemove = (e) => {clearTimeout(timerId);mplayer.style.opacity = '.95';timerId = setTimeout('mplayer.style.opacity = "0"', 3000);};document.addEventListener("fullscreenchange", () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({
player_css: 'left: 10px; bottom: 10px; --ww: 40px; --bg: green; border: --snow;',
});
})();
</script>本全屏帖子插件，仅一个插件接口变量，player_css，调用方法请参照上面的代码。这里简单说明一下接口的参数：
① left ：定位播放器在帖子中的左边位置，也可以用 right 定位右边位置； ② bottom ：定位播放器在帖子中下边的位置，也可以用 top 定位上边的位置；③ --ww ：光盘大小，建议 40 px 上下；④ --bg ：全屏观赏按钮的背景色；⑤ border ：全屏观赏按钮边框色和文本颜色。
插件有自己的默认设置，若缺省调用，可以这么写调用代码：
HCPlayer({
});
或写在一行里：
HCPlayer({ });
欣赏老师佳作！ 海笑 发表于 2023-1-26 09:27
欣赏老师佳作！
初五好，上午好 黑黑先生吃破五饺子没有啊？ 神采美好的图图，给论坛带来一股新鲜。 庶民来了 发表于 2023-1-26 11:19
神采美好的图图，给论坛带来一股新鲜。
感谢支持 梦油 发表于 2023-1-26 11:17
黑黑先生吃破五饺子没有啊？
哈哈哈，没那么讲究，不过饺子总是要吃的 哇瑟，黑黑分享教程顺带回帖奖励，太好了{:4_189:} 就一个播放器加全屏欣赏，应该可以直接套用的 没有歌词同步速度就很快了 这个美女胆子真大，和老虎亲昵{:4_173:} 这个美女是山鬼？老虎都不怕的 马黑黑 发表于 2023-1-26 11:50
哈哈哈，没那么讲究，不过饺子总是要吃的
我们这里不吃饺子的，整个过年没有吃过饺子 去找个图图做个试试 《九歌·山鬼》是战国时期楚国诗人屈原的作品。此诗是祭祀山鬼的祭歌，叙述的是一位多情的山鬼，在山中与心上人幽会以及再次等待心上人而心上人未来的情绪，描绘了一个瑰丽而又离奇的神鬼形象。全诗把山鬼起伏不定的感情变化、千回百折的内心世界，刻画得非常细致、真实而动人。 九歌①·山鬼②
若有人兮山之阿③，被薜荔兮带女萝④。
既含睇兮又宜笑⑤，子慕予兮善窈窕⑥。
乘赤豹兮从文狸⑦，辛夷车兮结桂旗⑧。
被石兰兮带杜衡⑨，折芳馨兮遗所思⑩。
余处幽篁兮终不见天⑪，路险难兮独后来。
表独立兮山之上⑫，云容容兮而在下⑬。
杳冥冥兮羌昼晦⑭，东风飘兮神灵雨⑮。
留灵修兮憺忘归⑯，岁既晏兮孰华予⑰？
采三秀兮于山间⑱，石磊磊兮葛蔓蔓⑲。
怨公子兮怅忘归⑳，君思我兮不得闲㉑。
山中人兮芳杜若㉒，饮石泉兮荫松柏㉓，
君思我兮然疑作㉔。
雷填填兮雨冥冥㉕，猨啾啾兮狖夜鸣㉖。
风飒飒兮木萧萧㉗，思公子兮徒离忧㉘。 白话译文
好像有人在那山隈经过，是我身披薜荔腰束女萝。
含情注视巧笑多么优美，你会羡慕我的姿态婀娜。
驾乘赤豹后面跟着花狸，辛夷木车桂花扎起彩旗。
是我身披石兰腰束杜衡，折枝鲜花赠你聊表相思。
我在幽深竹林不见天日，道路艰险难行独自来迟。
孤身一人伫立高高山巅，云雾溶溶脚下浮动舒卷。
白昼昏昏暗暗如同黑夜，东风飘旋神灵降下雨点。
等待神女怡然忘却归去，年渐老谁让我永如花艳？
在山间采摘益寿的芝草，岩石磊磊葛藤四处盘绕。
抱怨神女怅然忘却归去，你想我吗难道没空来到。
山中人儿就像芬芳杜若，石泉口中饮松柏头上遮，
你想我吗心中信疑交错。
雷声滚滚雨势溟溟蒙蒙，猿鸣啾啾穿透夜幕沉沉。
风吹飕飕落叶萧萧坠落，思念女神徒然烦恼横生。 按先秦及汉代的祭祀礼俗，巫者降神必须先将自己装扮得与神灵相貌、服饰相似，神灵才肯“附身”受祭。但由于山鬼属于“山川之神”，古人采取的是“遥望而致其祭品”的“望祀”方式，故山鬼是不降临祭祀现场的。此诗即按照这一特点，以装扮成山鬼模样的女巫，入山接迎神灵而不遇的情状，来表现世人虔诚迎神以求福佑的思恋之情。诗中的“君”“公子”“灵修”，均指山鬼；“余”“我”“予”等第一人称，则指入山迎神的女巫。 一则很美好的神话故事，记得我以前也收集过山鬼的图图，美妙的女子和山林之王猛虎，交相辉映，给人以奇妙的美之享受{:4_171:}