起个网名好难 发表于 2025-2-22 21:26

九路财神传说


<meta charset="utf-8">
<meta name="referrer" content="never" >
<style type="text/css">
        #oBlk        {
                width:540px;height:960px;margin:20px auto;
                background-color:hsl(240, 35%, 95%);
                position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
        }
        #showSVG        {width:540px;height:742px;}
        #controlBox        {position:absolute; l;eft:10px;bottom:120px;width:60px;z-index:100;}
</style>
<div id="oBlk">
        <div id="showSVG"></div>
        <div id="controlBox">
                <svg viewbox="0 0 100 100" >
                        <path fill="brown" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
                </svg>
        </div>
        <audio id="bjMusic" src="https://cccimg.com/view.php/826c9461ecefbfbb906a00f77b7b112b.mp3" loop autoplay />        //                1914674022
</div>
<script>
let pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzwCxvIkTvKicydXZVgbrBtlbQkkOkzJovcsrPiaYEY6TtOJpia9IygpibIg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzaicaYrgJf9QyaruvklCeA0qXnoMpdAAvIVSXefEvCrFzzbMibibiaj6vwA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzsoNsibskAVicxEsj55pPc5JK8heMcedicX4a356A5QjXBib39ib3VCOLN0Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzvZKO6wWicISEXZKpl91ULRnLhrkZV1icFyQKXR3Kic9P0iaiaYvkib5f4JHA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzbcyFvt0XGXEbosOSyCQoNWficuvpEibSfrMBP6b6ofexOpicfEcmPqSQw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzvhHbqnjYkibu0WgGMibYqREy4yvoscxsToQ1wqbQNyptXS6Hy0dNqDuQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzicoictsnC5sagbrTiaAtq2Ou2gXZmJNw8puohAva7Brb0h9FvAzlOf2cA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzcmKAVWbxQoqAQI10F6zR1clnIBgvRwP0D2tJoEMXjcx5q7FaBDVopw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzAsjRZtnSe1gYnib95wlrWAibzUvQJak6olfOhsh6TkveYF7wwJQ7RbAQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/mibQftXXCwrr6HR3Mdiaiawf0iaG5gK6PkXzlzYCkWy1ZyYpxalS4I6AelKic1tQqBicSYQKpoo1hWtwdpP9CicB3gj3Q/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 960`});
pics.forEach((pic, idx) => {
        if(idx < pics.length - 1)        {
                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':742, '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+12`, 'fill':'freeze'});
        }
});
                let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${pics.length-1}`, 'xlink:href':pics, 'width':540, 'height':960, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
                let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${pics.length-1}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':`ep${pics.length-2}.end-1.5`, 'fill':'freeze', 'class':'sTag'});
                aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${pics.length-1}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${pics.length-1}.begin+12`, 'fill':'freeze'});
                //-----------------------------------------------------------------------------------------------------------------------
let fObj = genTagObj(mysvg,{'tag':'foreignObject','width':540, 'height':210, 'x':0, 'y':745});
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:600 32px 仿宋;"});
let pObj = genTagObj(divObj,{'tag':'p','style':"padding:16px;text-indent:2em;text-align:left;font:400 24px 微软雅黑;"});
showSVG.innerHTML = mysvg.outerHTML;

let picDesc = [
["王亥", "位居中央，又名王振，是河南商丘人，商国的第七任君主，被称为“华商始祖”，掌管六十岁人以后的财运，是九位财神中“资历”最老的一位。"],
["比干", "东边财神，商代帝王太丁的次子，20岁就以太师高位辅佐帝王帝乙。"],
["范蠡", "东南财神，被后人称为商圣，曾三次散尽家财，周济平民。"],
["关公", "西边财神，即关羽，以忠义被尊为“武圣”，在民间也被视为财神。"],
["赵公明", "北边财神，又称玄坛真君、赵公元帅，是道教四大元帅之一，也是正财神。"],
["端木赐", `西南财神，复姓端木，字子贡，是孔子的得意门生，以善于经商闻名，被尊称为“儒商之祖”。`],
["李诡祖", "东北财神，在魏孝文帝时任曲梁县令，清廉爱民，去世后被立祠祭祀，民间传说他主掌财库。"],
["柴荣", "南边财神，五代时期后周皇帝，被百姓尊称为“君财神”。"],
["刘海蟾", `西北财神，全真道北五祖之一，被尊为“海蟾明悟弘道真君”，民间传说他能给人带来财运。`],['','']
];

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;
        musicObj.volume = 0.4;
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();});
        musicObj.addEventListener('pause', () => {playCtrl.setAttribute('d', playPath); svgObj.pauseAnimations();});

</script>
<!--
-->

红影 发表于 2025-2-22 21:35

比干、范蠡、关公这些耳熟能详的人，居然也是财神啊，完全没想到{:4_173:}

红影 发表于 2025-2-22 21:37

原本只知道赵公明是财神，原来还有这么多财神呢{:4_173:}

红影 发表于 2025-2-22 21:53

去搜了一下，原来本来就有五路财神之说呢，东路财神比干、西路财神关羽、南路财神柴王爷、北路财神赵公明、中路财神王亥。

红影 发表于 2025-2-22 21:53

这个好，涨知识了，感谢难难带来的好帖{:4_199:}

小文 发表于 2025-2-22 22:01

喜欢

小辣椒 发表于 2025-2-22 22:25

难难欣赏你的帖涨知识了，这些我以前都不知道的{:4_189:}

小辣椒 发表于 2025-2-22 22:26

感谢难难又一个图片特效代码制作{:4_199:}

起个网名好难 发表于 2025-2-23 07:49

红影 发表于 2025-2-22 21:35
比干、范蠡、关公这些耳熟能详的人，居然也是财神啊，完全没想到

关公是赫赫有名的武财神

起个网名好难 发表于 2025-2-23 07:50

红影 发表于 2025-2-22 21:37
原本只知道赵公明是财神，原来还有这么多财神呢

赵公明得到广泛的认可

起个网名好难 发表于 2025-2-23 07:53

红影 发表于 2025-2-22 21:53
去搜了一下，原来本来就有五路财神之说呢，东路财神比干、西路财神关羽、南路财神柴王爷、北路财神赵公明、 ...

东南西北中加上四个角就有了9个，再多财神也只是个美好的愿望。

起个网名好难 发表于 2025-2-23 07:53

红影 发表于 2025-2-22 21:53
这个好，涨知识了，感谢难难带来的好帖

谢谢支持与欣赏！

起个网名好难 发表于 2025-2-23 07:54

小文 发表于 2025-2-22 22:01
喜欢

谢谢支持与欣赏！

起个网名好难 发表于 2025-2-23 07:55

小辣椒 发表于 2025-2-22 22:25
难难欣赏你的帖涨知识了，这些我以前都不知道的

都是些传说只是美好的愿望

起个网名好难 发表于 2025-2-23 07:55

小辣椒 发表于 2025-2-22 22:26
感谢难难又一个图片特效代码制作

谢谢支持与欣赏！

庶民 发表于 2025-2-23 08:22

制作的太有趣。

起个网名好难 发表于 2025-2-23 09:00

庶民 发表于 2025-2-23 08:22
制作的太有趣。

谢谢支持与欣赏！

梦江南 发表于 2025-2-23 10:16

范蠡也是财神，这个才知道。

起个网名好难 发表于 2025-2-23 11:42

梦江南 发表于 2025-2-23 10:16
范蠡也是财神，这个才知道。

范蠡和西施的故事

梦江南 发表于 2025-2-23 14:19

起个网名好难 发表于 2025-2-23 11:42
范蠡和西施的故事

范蠡和西施的故事知道啊，范蠡什么时候变成财神了呢！
页: [1] 2 3 4 5
查看完整版本: 九路财神传说