十二仙乐图

起个网名好难 发表于 2025-2-25 16:50

本帖最后由起个网名好难于 2025-2-25 17:06 编辑 <br /><br /><meta name="referrer" content="never" >
<style type="text/css">
#oBlk {
width:700px;height:950px;margin:32px auto;
display: grid;background-color:hsl(240, 35%, 95%);
place-items:center;position:relative;
grid-template-rows:100%;
grid-template-columns:540px 160px;
box-shadow:3px 3px 8px darkgray;
overflow:hidden;border-radius:24px;
}
#showSVG {width:540px;height:100%;}
#desc {width:160px; height:950px;}
#controlBox {position:absolute; right:0px;bottom:0px;width:60px;z-index:100;}
</style>
<div id="oBlk">
<div id="showSVG"></div>
<div id="desc"></div>
<div id="controlBox">
<svg viewbox="0 0 100 100" >
<circle r="36" cx="50" cy="50" fill="none" stroke="red" stroke-width="4" />
<circle r="30" cx="50" cy="50" fill="none" stroke="red" stroke-width="2" />
<path fill="#f00" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
</svg>
</div>
</div>
<audio id="bjMusic" src="https://music.163.com/song/media/outer/url?id=1388617928.mp3" loop autoplay ></audio>

<script>
let pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTf8fBRqVVwqic5Q8bwNrFI8lF0icu5HFvUvDBatr9BicVYzbXF4IL5YrbQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTIllUYaeE742tghf7X2EUDYjdpNFV2DXcdxaK0LgKFHzNf5ib6ohdZFQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTThDu6Em95YYsYwmCDXD0uDPViaPRNIrPGngzD0Lm6mITR7ZP3kiaEcvw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaT3ttD5tBtfFh1U5OZHfCDbSYnMXka2iaazsor2nDFqhr1mWFjnkcF7ibw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTpibnibG64w6fxtKC30QT3epLSVVdSv8p5JdNmkd3OgIvR6njXf4Tv6nA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaT1UJN1qnZFAOtYI78FdJfvMGibSARVLFjtyz8EL4usfqZ6GfvgmHseRw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTVM1jP7s0MiaOLQ9v1zgHMRlibK1Y0SgQjpnDtSHvSczamTIhNEvicMic4w/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTicIe1LFvemYHBuFdA95l3BL9NK8X8ib4k9HrNYR1MzicTjevBCBuuuZRg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTB1Dcs5IMlAQNqPDUJeI3KvDWcUIoWh66icubsZTFdiaCb4y2t4Wziav7g/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaT2YQvibAxeRNPibI2icVUSHtTl53ZkEeV3auldz4RynrEjv1IfH8Xmua2w/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaThd8hxd2KdxicINk0gqfqJicuicHic4A1j7z2iaDBbHuXYIicNRicPJnIs80TA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0w8P1vFqMBtviccIyIzTsl3iaTHgPOzMOzqXdK6W3N1A0XibibicGNl9EbKBhl1OJcHO44AGU1D9FWtDrJA/640",
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'svgObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 540 950`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':540, 'height':950, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze', 'class':'sTag'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+15`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

let picDesc = [
["箫", '传统乐器，迄今发现的世界上最早的排箫是距今3000年的中国西周初期的骨排箫。古代所谓的“箫”其形制应同于今日之“排箫”，即将长短不同的竹管并排固定的竖吹乐器。'],
["钹", '中国传统乐器，铜质圆形的传统乐器，中心鼓起，两片相击作声。古称“铜钹”、“铜盘”。'],
["筚篥", '亦名悲篥，有类于茄，属吹管乐器,有类似笳的簧或吹嘴。最早文献见于南朝何承天的的《篡文》：必栗者，羌胡乐器名也。'],
["拍板", '是一种碰奏体鸣乐器。古时多用檀木制作，又名“檀板”。唐玄宗时，梨园乐工黄幡绰善奏此板，故又称“绰板”。用于戏曲、曲艺和器乐合奏。古时由西北传入中原。'],
["埙", '埙是目前已知国内最早的乐器之一，埙在唐代的使用多为郊庙、元会、冬至及册命大礼的雅乐场合，可见其具有典型官方礼仪属性，它既是八音“土之属”的代表，又位列“六德之音”。'],
["横笛", '相传汉武帝时张骞出使西域以后输入长安。宋朝以后，成为伴奏戏曲的重要乐器。'],
["云锣", '出现于唐代，元代开始大为流行，是中国敲击体鸣乐器。古名云辙，又名云璈，民间又称九音锣。藏族称丁冬、丁当。是锣类乐器中能奏出曲调的乐器。'],
["笙", '我国古老的民族簧管乐器，因古代把封置有簧片的笙管插于“瓠”（葫芦的一种）构成，故“笙”在八音分类中属“匏”，属于自由簧乐器。音色恬静、优美，和声丰满、圆润，可用于独奏、器乐合奏或为地方戏曲和歌舞伴奏。'],
["鼓", '在中国传统的打击乐器里，鼓类占有突出的地位。盘鼓、建鼓、铜鼓、腰鼓及鸡娄鼓、答腊鼓、羯鼓等都曾在各种图像中出现。'],
["曲颈琵琶", '音色优美，穿透力强（衰减小，传得远）。高音区明亮而富有刚性，中音区柔和而有润音，低音区音质淳厚。'],
["箜篌", '又称竖头箜篌，亦称“臂箜篌”，现简称箜篌，箜篌状如半截弓背，曲形共鸣横设在向上弯曲的曲木上，音箱多是皮革制成，并有脚柱和肋木，张着20多条弦，竖抱于怀中，从两面用双手的拇指和食指同时弹奏。'],
["筝", '唐赵磷《因话录》记述：筝，秦乐也，乃琴之流。古瑟五十弦，自黄帝令素女鼓瑟，帝悲不止，破之，自后瑟至二十五弦。秦人鼓瑟，兄弟争之，又破为二。筝之名自此始。']
];
let dscsvg = genTagObj(null ,{'tag':'svg', 'id':'dObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 160 950`});
let fObj = genTagObj(dscsvg,{'tag':'foreignObject','width':160, 'height':950, 'x':0, 'y':0,'writing-mode':'tb'});
let bObj = genTagObj(fObj,{'tag':'body','xmlns':"http://www.w3.org/1999/xhtml"});
let divObj = genTagObj(bObj,{'tag':'div','style':"padding:8px;width:100%;height:100%;text-align:center;line-height:1.5em;color:brown;letter-spacing:3px;", 'id':"txtBlock"});
let sObj = genTagObj(divObj,{'tag':'span','style':"color:red;font:bold 26px 仿宋;"});
let pObj = genTagObj(divObj,{'tag':'p','style':"padding:16px;text-indent:2em;text-align:left;font:400 18px 微软雅黑;"});
desc.innerHTML = dscsvg.outerHTML;

let aniIdx = 0;
let txtBlock = document.querySelector('#txtBlock');

let showDesc = () => {
txtBlock.querySelector('span').innerHTML = picDesc;
txtBlock.querySelector('p').innerHTML = picDesc;
txtBlock.animate([{height:'0'},{height:'100%'}], {duration:2000, fill:'forwards'});
}
let startTxtAnimation = () => {
var aniFinishHandle = txtBlock.animate([{height:'100%'},{height:'0'}], {duration:500, fill:'forwards'});
aniFinishHandle.pause();
aniFinishHandle.addEventListener("finish" , showDesc);
let startTags = document.querySelectorAll(".sTag");
startTags.forEach((tag) => {
tag.onbegin = () => {aniIdx = parseInt(tag.id.substr(2)); aniFinishHandle.play();}
});
}
startTxtAnimation();

const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
const playPath = "M35 35 l30 15 -30 15 z";
const musicObj = bjMusic;
playCtrl.onclick = () => musicObj.paused
? (musicObj.play(),playCtrl.setAttribute('d', pausePath))
: (musicObj.pause(),playCtrl.setAttribute('d', playPath));
musicObj.addEventListener('play', () => {playCtrl.setAttribute('d', pausePath); svgObj.unpauseAnimations();dObj.unpauseAnimations();});
musicObj.addEventListener('pause', () => {playCtrl.setAttribute('d', playPath); svgObj.pauseAnimations();dObj.pauseAnimations();});

</script>

梦江南 发表于 2025-2-25 17:01

哇，十二仙女下凡到花潮来了。{:4_173:}

梦江南 发表于 2025-2-25 17:02

原来是仙乐啊！

起个网名好难 发表于 2025-2-25 17:06

梦江南发表于 2025-2-25 17:01
哇，十二仙女下凡到花潮来了。

谢谢支持与欣赏！

起个网名好难 发表于 2025-2-25 17:07

本帖最后由起个网名好难于 2025-2-25 17:09 编辑

梦江南发表于 2025-2-25 17:02
原来是仙乐啊！
1984 年，董洪元创作了《十二仙乐图》，展现出与他以往截然不同的风格与意境。《十二仙乐图》像是一首首空灵的诗篇，它脱离了具体的故事情节，专注于营造一种梦幻般的仙境氛围，将中国传统的神话元素与精湛的绘画技艺完美融合，为我们呈现出一个美轮美奂的仙界。

小辣椒 发表于 2025-2-25 20:06

哇塞，这个文字可以这样竖的出来{:4_199:}

小辣椒 发表于 2025-2-25 20:07

难难你太厉害了，每个帖都这么精彩，小辣椒欣赏加学习{:4_187:}

起个网名好难 发表于 2025-2-25 20:10

小辣椒发表于 2025-2-25 20:06
哇塞，这个文字可以这样竖的出来

容器的宽度逐渐变大，里面的文字随着展开的效果。

起个网名好难 发表于 2025-2-25 20:10

小辣椒发表于 2025-2-25 20:07
难难你太厉害了，每个帖都这么精彩，小辣椒欣赏加学习

谢谢支持与欣赏！

红影发表于 2025-2-25 20:21

这么多的古代乐器，有些听到过没见过，有些连听都没听到过。这个帖子真好，涨知识了{:4_199:}

红影发表于 2025-2-25 20:21

这些图图也好美啊，谢谢难难带来的好帖{:4_199:}

起个网名好难 发表于 2025-2-25 20:34

红影发表于 2025-2-25 20:21
这么多的古代乐器，有些听到过没见过，有些连听都没听到过。这个帖子真好，涨知识了

一些都已经失传了。

起个网名好难 发表于 2025-2-25 20:34

红影发表于 2025-2-25 20:21
这些图图也好美啊，谢谢难难带来的好帖

谢谢支持与欣赏！

杨帆发表于 2025-2-25 21:41

图文并茂，动静相宜，衔接自如，集知识性、趣味性、娱乐性于一贴，为难难老师点赞{:4_191:}

红影发表于 2025-2-25 21:48

起个网名好难发表于 2025-2-25 20:34
一些都已经失传了。

只能在古典小说里看看它们的名字了，无缘欣赏到了。

红影发表于 2025-2-25 21:49

起个网名好难发表于 2025-2-25 20:34
谢谢支持与欣赏！

这些图图特别仙，很美{:4_187:}

亦是金 发表于 2025-2-25 21:57

老师的帖子很有特点，图美，歌曲舒缓动听！文字介绍的展开方式新颖！欣赏点赞学习了！老师辛苦了！{:4_190:}

起个网名好难 发表于 2025-2-26 08:04

亦是金发表于 2025-2-25 21:57
老师的帖子很有特点，图美，歌曲舒缓动听！文字介绍的展开方式新颖！欣赏点赞学习了！老师辛苦了！{:4_190: ...

谢谢支持与欣赏！

深秋红枫 发表于 2025-2-28 20:20

起个网名好难 发表于 2025-2-28 21:34

深秋红枫发表于 2025-2-28 20:20
var lxtxt =[">lmth/

谢谢支持与欣赏！

页: [1]

花潮论坛's Archiver

十二仙乐图