梦江南 发表于 2026-5-8 15:33

一路花开


<style>
#outframe        {
        width:810px;height:600px;position: relative;box-shadow:-4px 4px 10px black; margin: 50px auto 30px calc(50% - 405px);
        overflow:hidden;border-radius:10%;background-color:hsl(60, 5%, 85%);}
.lrcShow {
font: bold 2em 楷体, 楷体_GB2312;
position: absolute;
width: 80%;
height: 2em;
bottom: -20px;
left:20%;
color: transparent;
filter: drop-shadow(1px 1px 1px white);
letter-spacing: 2px;
}
.sChar {
        // display: block;
        display: inline-block;
        padding: 0 2px;
        opacity: 0;
        transform: translate(var(--x), var(--y));
        animation: fadeIn 0.3s var(--delay) forwards;
}
@keyframes fadeIn {
        to {
                transform: translate(0, 0);
                opacity: 1;
        }
}
#showSVG        {width:810px;height:550px;position:relative;}
</style>
<div id="outframe">
        <div id="showSVG">        </div>
        <div class="lrcShow" ></div>
        <div id="controlBox" style="position:absolute;bottom:0px;right:30px;z-index:199;width:60px;height:60px;visibility:hidden;">
                <svg viewBox="0 0 100 100">
                        <circle r="36" cx="50" cy="50" fill="none" stroke="red" stroke-width="4">
                        </circle>
                        <circle r="30" cx="50" cy="50" fill="none" stroke="red" stroke-width="2">
                        </circle>
                        <path fill="red" id="playCtrl" d="M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z">
                        </path>
                </svg>
        </div>
</div>       
<script>
const        pics = [
"https://pan.suyanw.cn/view.php/4c42bede728e8356d3e8ae1073f75f3f.jpg",
"https://pan.suyanw.cn/view.php/297396967e44228bcf4e1fe7c5f0a1fd.jpg",
"https://pan.suyanw.cn/view.php/2754d8d72618e615894470f15b826691.jpg",
"https://pan.suyanw.cn/view.php/c0c1631bbdf1f18d909cad71cd25ae2d.jpg",
"https://pan.suyanw.cn/view.php/830eff4ab96b71bb1dfd9b5728dc95b8.jpg",
"https://pan.suyanw.cn/view.php/f088f31498cb3fe503b33b7704e1e84f.jpg",
"https://pan.suyanw.cn/view.php/763f21eea9d636362cb64dbe05773ab5.jpg",
"https://pan.suyanw.cn/view.php/29881c7ffea56d52b303b7ebe3bb7c6e.jpg",
"https://pan.suyanw.cn/view.php/196272fe93ca14d058c3a97f3671c995.jpg",
"https://pan.suyanw.cn/view.php/2530d64b55a3f4b085c006b91e1f431c.jpg",
"https://pan.suyanw.cn/view.php/a3149dfa294213f5dd27b8e06ff9696f.jpg",
"https://pan.suyanw.cn/view.php/209b1388b982ff6fb914ea406baa40b3.jpg",
"https://pan.suyanw.cn/view.php/72f6b7c9637d72b59ae13941f2e6fbfb.jpg",
"https://pan.suyanw.cn/view.php/e2f3f9befff056876d0c3ab920cc8125.jpg",
"https://pan.suyanw.cn/view.php/15a0e20788fabc42cc9cd62d12a698fc.jpg",
"https://pan.suyanw.cn/view.php/b53e75137215f4cabe416a09e2957bd1.jpg",
"https://pan.suyanw.cn/view.php/e6c811cd08d549ea1754043b8aa8696e.jpg",
"https://pan.suyanw.cn/view.php/c25154d2a0920aed2854adcaf782f088.jpg",
"https://pan.suyanw.cn/view.php/cf09a51e4597968f30cb5203cdc0984a.jpg",
"https://pan.suyanw.cn/view.php/4fffb94c56cab23c54d36ca02b9bf950.jpg",
"https://pan.suyanw.cn/view.php/42fb6e85aaa6b56e374876267299f63e.jpg",
"https://pan.suyanw.cn/view.php/0fd167b5b2b282b4f1e93ef2a500043a.jpg",
"https://pan.suyanw.cn/view.php/d03d97d88b27005dc37eb2ae26bafb2f.jpg",
"https://pan.suyanw.cn/view.php/bee6ec09b598fef938af313d1e19f135.jpg",
"https://pan.suyanw.cn/view.php/1df5d21eaa8e5c17e1c2765ea063c3e1.jpg",
"https://pan.suyanw.cn/view.php/6af0a2fa294b67590cc6961ee290b7f1.jpg",
"https://pan.suyanw.cn/view.php/a5fed34913b842b723773dea100f2bea.jpg",

];
/**
var sf = document.createElement('script');
sf.type = 'text/javascript';
//sf.src = "script/genSvgClass.js";
//sf.src = "script/lrcPlayerSvgMaker.js";
sf.src="https://cccimg.com/down.php/a137620a9f0aee083a137ea0858947b9.js";
sf.charset = "utf-8";
document.body.appendChild(sf);
***/
const loadJs = (url, callback) => {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

const genAniPic = () => {
        let picArr = [], errCount = 0;

        let getPictureSize = (url,pIdx) => {
                let img = new Image();
                img.onerror = () => {
                        console.log(url+" 图片加载失败，请检查url是否正确");
                        errCount++;
                };

                img.onload = () =>        {
                        picArr.push({'index':pIdx, 'url':url, 'width':img.width, 'height':img.height});
                        img.onload=null;//避免重复加载
                       
                }
                img.src = url;
        }
        let dataReady = ()=> {
                if(picArr.length != (pics.length - errCount))        setTimeout(dataReady,50);
                else        {
                        picArr.sort(function(a, b) {
                                return (a.index - b.index);
                        });

                        let opts = {width:showSVG.offsetWidth, height:showSVG.offsetHeight , showObj: showSVG, picAr: picArr};

                        new mkSVGPics(opts).makeSVGsegment();
                        outframe.addEventListener("mouseleave", () => {
                                svgObj.unpauseAnimations();
                                controlBox.style.visibility = "hidden";
                        });
                        outframe.addEventListener("mouseenter", () => {
                                svgObj.pauseAnimations();
                                controlBox.style.visibility = "visible";
                        });
                }
        }
        pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
        dataReady();
}

loadJs("https://cccimg.com/down.php/a137620a9f0aee083a137ea0858947b9.js", genAniPic);

const lrctxt = `
一路花开
        词曲：风轻云淡
        演唱：苦乐人生
        LRC歌词编辑：梦江南
        春风吹过来
        烦恼都抛开
        脚步轻轻踩
        心事不用猜
        花儿沿路开
        好运迎面来
        心有欢喜在
        笑容满心怀
        把烦恼交给春风
        愿你一路花开
        满心皆是欢喜吉祥伴常在
        把烦恼交给春风
        踏歌向未来
        吉祥伴着你我快乐跳起来
        ************
        雪山映云彩
        歌声飘天外
        舞步多自在
        烦恼都散开
        岁月多慷慨
        温柔入心怀
        一路花盛开
        喜乐常安排
        把烦恼交给春风
        愿你一路花开
        满心皆是欢喜
        吉祥伴常在
        把烦恼交给春风
        踏歌向未来
        吉祥伴着你我快乐跳起来
        咿一路花开满心欢喜
        吉祥如意岁岁平安
`;
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 opts = {
    lrcTxt:lrctxt,
        audioURL:"https://pan.suyanw.cn/view.php/1c027791d18c9f173e9729dd10975eeb.mp3",
        //canvas:cvs
}
/**
var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
//sf1.src = "https://cccimg.com/down.php/5a22fae8e3c882e53f8d677698997e43.js";
sf1.src = "https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js";
//sf1.src = "script/lrcPlayerFrgD.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
**/
const genLrcPlayer = () => {


        let lrcPlayer = new lrcPlayerFrg(opts);

        const musicObj = lrcPlayer.getAudObj();
       
        const pState = () =>        {
                musicObj.paused ? (playCtrl.setAttribute('d', playPath)): (playCtrl.setAttribute('d', pausePath));
        };
       
        controlBox.onclick = () =>        {
                                if(lrcPlayer.getAudContext() && lrcPlayer.getAudContext().state !== 'running') {
                                        lrcPlayer.getAudContext().resume();
                                }
                                if (musicObj.paused) {
                                        musicObj.play();
                                } else {
                                        musicObj.pause();
                                }
        }
        //musicObj.addEventListener("timeupdate", () => {
        //        myRange.value = parseFloat((musicObj.currentTime / musicObj.duration) * 100);
        //})
        musicObj.addEventListener('play', () => pState());
        musicObj.addEventListener('pause', () => pState());
       
        musicObj.play().catch(_ = () => pState());
}
loadJs("https://cccimg.com/down.php/86abfd1a59a239a0c6f2f1d6d1897c82.js", genLrcPlayer);

</script>

梦江南 发表于 2026-5-8 15:35

鸣谢也曾年轻老师的代码。套一个。花的照片是用手机拍摄。
{:4_180:}

也曾年轻 发表于 2026-5-8 15:39

https://tva1.sinaimg.cn/large/c3335c0ely1gqvzx1ejkug20dv07jgns.gif

梦江南 发表于 2026-5-8 15:48

也曾年轻 发表于 2026-5-8 15:39


这是什么啊？转不出来？

杨帆 发表于 2026-5-8 16:46

好听好看，谢谢江南精彩分享{:4_204:}

梦油 发表于 2026-5-8 17:14

梦江南 发表于 2026-5-8 15:35
鸣谢也曾年轻老师的代码。套一个。花的照片是用手机拍摄。

手机拍摄的照片这么美很棒啊！

梦江南 发表于 2026-5-8 17:35

杨帆 发表于 2026-5-8 16:46
好听好看，谢谢江南精彩分享

问好杨帆，谢谢分享，{:4_180:}

梦江南 发表于 2026-5-8 17:36

本帖最后由 梦江南 于 2026-5-8 17:41 编辑

梦油 发表于 2026-5-8 17:14
手机拍摄的照片这么美很棒啊！
问好梦油，谢谢分享，是花本身漂亮。{:4_180:}

梦油 发表于 2026-5-8 19:34

梦江南 发表于 2026-5-8 17:36
问好梦油，谢谢分享，是花本身漂亮。

哈哈哈……你好谦虚。

梦江南 发表于 2026-5-8 19:39

梦油 发表于 2026-5-8 19:34
哈哈哈……你好谦虚。

是实话实说啦。

小九 发表于 2026-5-8 20:15

很美的制作，手机拍得好看的花儿！ 春天总是短暂而美好的。{:4_187:}

小辣椒 发表于 2026-5-8 22:08

手机拍的花花图片很漂亮，春天最美的季节

小辣椒 发表于 2026-5-8 22:11

歌曲还有动感的节奏，欢快的乐曲，好听

小辣椒 发表于 2026-5-8 22:11

这个代码我也是收藏了，想有时间玩一次

小辣椒 发表于 2026-5-8 22:12

欣赏阿姨精彩的制作{:4_171:}

霜染枫丹 发表于 2026-5-9 00:09

很漂亮的制作，很精美的好贴，欣赏学习~~{:4_204:}{:4_190:}

梦江南 发表于 2026-5-9 07:57

小九 发表于 2026-5-8 20:15
很美的制作，手机拍得好看的花儿！ 春天总是短暂而美好的。

谢谢小九老师诗意般的回复，祝你开心快乐！{:4_204:}

梦江南 发表于 2026-5-9 07:59

小辣椒 发表于 2026-5-8 22:08
手机拍的花花图片很漂亮，春天最美的季节

问好小辣椒，这些花是很漂亮的，阿姨拍的一般。{:4_204:}

梦江南 发表于 2026-5-9 08:01

小辣椒 发表于 2026-5-8 22:11
歌曲还有动感的节奏，欢快的乐曲，好听

这个苦乐人生歌唱得都很好听的，他的声音很干净，高手在民间。{:4_204:}

梦江南 发表于 2026-5-9 08:03

小辣椒 发表于 2026-5-8 22:11
这个代码我也是收藏了，想有时间玩一次

好的，你再自己加点什么，阿姨只会纯套了。{:4_187:}
页: [1] 2
查看完整版本: 一路花开