起个网名好难 发表于 2025-2-11 12:10

中国古代神话传说


<meta name="referrer" content="never" >
<style type="text/css">
        #oBlk        {
                width:700px;height:950px;margin:80px 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;}
</style>
<div id="oBlk">
        <div id="showSVG"></div>
        <div id="desc"></div>
</div>
<audio src="https://music.163.com/song/media/outer/url?id=1818632650.mp3" loop autoplay ></audio>

<script>
let pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfz4JicMV4TuXibnr8HA64asJbUt2mOCN58YwC5HSlFtdibYy4uzcrjNPtg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfPwIFbw3CqIdbQ5G8iaO1L02k9cgVcAx0kVtOMATALY1hQux9d3vohBA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfNsZZwW6HK9CVFnz8UvC3y6AxxP8pyDsjyTKKfyocp1JwRq2lRBd80Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfTmNUers3tQ28rujYRRYsNbr8GvSNtkbtDySqicgK9UZP2oFxmFp0BLQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfIqVZ0n68MjfEULJXyUCutswU9IJrlgEKBKd9rMeXM76XgezGx6GrGA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfy5pzQ77jwHNGvTyfkfXm40EibVNHj5vcRekm07LhAhMoSrAaO2KSWXg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfWsu4vm8TR1iauAzzJrDxRwK2VEel9Y7Fr46TVpriautFiac5oLdm0ibsAQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfMss3cmibahq8h0JVre1chWicm0b2F1aVzeDv4Wo3t0B45MEG4AmQPfgA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfYNZgtF5Wgus0TbmKLJIfU4rDEVYtFicskpyASwHs1XibLRO19miaunP3Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfhVY4JORlic1MluNQ1BOxIiaIRGAqE26y6q2yenFQKELqsBRFCoicgTOeA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfypMJtZe9tUYVbofAUUzg30BLPO7OrczdsVmsoXibATIbNkPmVrFaDLw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/rmibzHWXX0wibhdtcOzicicuDI0BSeHnASpfwCv5DI3qQMypOTMMNQropXF8GjAibvOFmKeRVlYykCbjW1J8jjWA4ww/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':'sObj', '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'});
        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 = [
["弄玉吹箫", '传说，秦穆公的女儿弄玉喜爱吹箫，一日，她在凤台上吹奏，箫声引来了善于吹箫的萧史。二人因箫结缘，情投意合，最终结为夫妻。他们每日在凤台上合奏，箫声美妙动听，引得凤凰来仪。后来，他们乘凤凰飞去，成为了一段浪漫的爱情佳话。'],
["麻姑献寿", '麻姑是道教神话中的长寿女神，传说她曾三次目睹沧海变为桑田，寿命极长。每年的三月初三，是西王母的寿辰，麻姑都会前往瑶池，献上自己用灵芝酿造的美酒，为西王母祝寿。'],
["女娲补天", '女娲是中国古代神话中的创世女神，她抟土造人，创造了人类社会。后来，天塌地陷，女娲炼五色石以补苍天，断鳌足以立四极，拯救了人类。'],
["天女散花", '天女散花的传说源自佛教，寓意着将美好的事物和祝福洒向人间。在这幅画中，华三川通过对花瓣飞舞的动态描绘，展现了一种灵动的美感。'],
["吴彩鸾跨虎入山", '传说吴彩鸾是一位仙女，她与书生文箫相爱，结为夫妻。后来，他们各跨一虎，升入仙境。'],
["洛神", '曹植的《洛神赋》中，描绘了他与洛神之间的一段浪漫而又无奈的爱情故事。顾恺之的《洛神赋图》更是将这段故事以绘画的形式展现得淋漓尽致。华三川笔下的洛神，在继承传统的基础上，又融入了自己的理解和创新。'],
["七仙女思凡", '七仙女思凡的故事，表达了人们对自由和爱情的向往。华三川在塑造仙女形象时，赋予了她们鲜明的个性和丰富的情感。'],
["精卫填海", '精卫填海的神话，讲述了炎帝的小女儿女娃在东海游玩时溺水身亡，死后化为精卫鸟，每天衔来石子和树枝，决心填平东海的故事。'],
["嫦娥奔月", '嫦娥奔月的传说，讲述了嫦娥为了保护仙药，被迫吃下后飞向月宫的故事。从此，她只能在清冷的月宫中孤独地守望。华三川通过对嫦娥和玉兔的神态刻画，将这种孤独与惆怅展现得淋漓尽致。'],
["天女舞乐", '展现了天女的灵动之美，运用丰富的色彩将天女们的服饰描绘得绚丽多彩，每一种颜色都仿佛是大自然的馈赠。'],
["娥皇女英", '传说娥皇和女英是尧帝的女儿，她们同时嫁给了舜帝。舜帝南巡时，不幸病逝，娥皇和女英悲痛欲绝，投湘水而死，化为湘水女神。'],
["瑶池赴会", '在瑶池赴会这个画面中，华三川通过对仙女们的服饰、神态和周围环境的描绘，体现了对王母的敬重和神话中的仙界秩序。仙女手中的宝物，每一件都蕴含着特殊的意义，它们代表着吉祥、幸福和美好的祝愿。']
];
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);
               
                document.querySelector("#bp0").onbegin = ()        => {aniIdx = 0;                aniFinishHandle.play();                }
                document.querySelector("#bp1").onbegin = ()        => {aniIdx = 1;                aniFinishHandle.play();                }
                document.querySelector("#bp2").onbegin = ()        => {aniIdx = 2;                aniFinishHandle.play();                }
                document.querySelector("#bp3").onbegin = ()        => {aniIdx = 3;                aniFinishHandle.play();                }
                document.querySelector("#bp4").onbegin = ()        => {aniIdx = 4;                aniFinishHandle.play();                }
                document.querySelector("#bp5").onbegin = ()        => {aniIdx = 5;                aniFinishHandle.play();                }
                document.querySelector("#bp6").onbegin = ()        => {aniIdx = 6;                aniFinishHandle.play();                }
                document.querySelector("#bp7").onbegin = ()        => {aniIdx = 7;                aniFinishHandle.play();                }
                document.querySelector("#bp8").onbegin = ()        => {aniIdx = 8;                aniFinishHandle.play();                }
                document.querySelector("#bp9").onbegin = ()        => {aniIdx = 9;                aniFinishHandle.play();                }
                document.querySelector("#bp10").onbegin = ()        => {aniIdx = 10;        aniFinishHandle.play();                }
                document.querySelector("#bp11").onbegin = ()        => {aniIdx = 11;        aniFinishHandle.play();                }
}
startTxtAnimation();
</script>

红影 发表于 2025-2-11 15:02

这么多的神话故事，都是女性形象呢。故事优美，画作漂亮{:4_199:}

红影 发表于 2025-2-11 15:06

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

深秋红枫 发表于 2025-2-11 15:39



<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！享分谢感，值价有图图好>"体宋仿 me5.1 dlob:tnof;%081:thgieh-enil;)fig.ItYAP4/31/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];

var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--)      {
      var linetxt = lxtxt;
      for(j = linetxt.length - 1; j>=0;j--)      {
                txtStr += linetxt.charAt(j);
      }
}
document.write(txtStr);
</script>

深秋红枫 发表于 2025-2-11 15:41

本帖最后由 深秋红枫 于 2025-2-11 17:27 编辑 <br /><br />
<video width="720px" height="1280px" controls autoplay loop muted>
      <source src="https://alimov2.a.kwimgs.com/upic/2024/10/21/21/BMjAyNDEwMjEyMTA0MzJfNTYwNzY4NjYwXzE0NjY1MDYyNTg3MF8yXzM=_b_Bba6ff78ce990ab5b0152fad6856ae6fd.mp4?tag=1-1739259145-unknown-0-xwn1sw1fnr-8ad5cd14133dec21&clientCacheKey=3xi9s46c6ed3y9q_b.mp4&bp=10000&tt=b&ss=vp" type="video/mp4">
    </video>

起个网名好难 发表于 2025-2-11 16:34

红影 发表于 2025-2-11 15:02
这么多的神话故事，都是女性形象呢。故事优美，画作漂亮

<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/FP8Z9xJJTEgkYEuMmVFlv5xVQrQQo1KIvRAOdO86vbXd0JQqXdSOFrVSyZyC6ziaTQ0ibucRLh55ic8WpplBJZI5g/640" width="400"/>

起个网名好难 发表于 2025-2-11 16:35

深秋红枫 发表于 2025-2-11 15:39
var lxtxt =[">lmth/


<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/FP8Z9xJJTEgkYEuMmVFlv5xVQrQQo1KIwNvWa2yHjgxZ68mrfTAxKr6An9loln2Des4pia1YDe3iaJFicuL1VsAhg/640" width="400"/>

起个网名好难 发表于 2025-2-11 16:36

深秋红枫 发表于 2025-2-11 15:41


https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2025-2-11 17:06

好国画，老师真会搜。{:4_173:}涨知识了！

梦江南 发表于 2025-2-11 17:09

华三川的国画价值不菲的。

深秋红枫 发表于 2025-2-11 17:24

起个网名好难 发表于 2025-2-11 16:55
5#视频与1#的背景音乐冲突了

我这就撤了它

深秋红枫 发表于 2025-2-11 17:29

起个网名好难 发表于 2025-2-11 16:55
5#视频与1#的背景音乐冲突了

5#静音了。

起个网名好难 发表于 2025-2-11 18:13

梦江南 发表于 2025-2-11 17:06
好国画，老师真会搜。涨知识了！


<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/FP8Z9xJJTEgkYEuMmVFlv5xVQrQQo1KIbQ2PDHfc1MxDhR1GgXyFx0XQfVFDzA4ob1ibcCKpxxbrjdbzpZ5zLUA/640" width="400"/>

起个网名好难 发表于 2025-2-11 18:13

深秋红枫 发表于 2025-2-11 17:29
5#静音了。

谢谢！

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

起个网名好难 发表于 2025-2-11 18:13
谢谢！

不必谢。您这儿能学到很多东西

红影 发表于 2025-2-11 20:43

起个网名好难 发表于 2025-2-11 16:34


谢谢，一起快乐{:4_187:}

梦江南 发表于 2025-2-12 07:42

起个网名好难 发表于 2025-2-11 18:13


https://pic1.imgdb.cn/item/67abdf95d0e0a243d4fe783f.gif

祝您元宵节快乐！

起个网名好难 发表于 2025-2-12 09:13

梦江南 发表于 2025-2-12 07:42
祝您元宵节快乐！


<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/AiatPyc4VpoFTLiavf0PPCBZXrYTyX0YAGBI1fL2cl5SKwb79pmhHrm9fq1Lia21B4tNPXsMGsvzfgQHJrgVf5N6Q/640" width="400" />
页: [1]
查看完整版本: 中国古代神话传说