小辣椒 发表于 2025-2-2 20:27

你的承诺败给时间 TO：难难


<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
        /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.2em 隶书;
                        pointer-events:none;
                        filter: drop-shadow(1px 0px 0px Black ) drop-shadow(-1px 0px 0px Blackr ) drop-shadow(0px 1px 0px Black ) drop-shadow(0px -1px 0pxBlack);
                        z-index:99;left:30%;bottom:10px;color:hsla(240,50%, 80%, 0.7);
        }
        #oBlk        {
                width:1422px;height:780px; position: relative; margin:90px 0 40px calc(50% - 800px);
                background: #222 ;
                padding:16px;
                overflow:hidden;
                border-radius:36px;
                box-shadow:3px 3px 6px darkgray;
        }
        #showSVG        {position:absolute; left:0px;top:0px;width:100%;height:110%;}
#processMeter        {position: absolute; leftt:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}

#dt2{ position: absolute; width:32px; height: 32px; top: 220px; left: 150px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 110px; left: 1120px; }




</style>

<div id="oBlk">
        <div id="showSVG"></div>

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />

                <div id="processMeter">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
                        <defs>
                    <clipPath id="clip">
                            <circle cx="100" cy="50" r="35" />
                    </clilpPath>
            </defs>
                        <image xlink:href="https://file.uhsea.com/2501/ea6b0890135a71c06a61fef8dfc113c1M8.png " width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <g fill='none' stroke-width='5'>
                               
                                                               <path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="lightgray" id="bgc"></path>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="pink" id="fgc"></path>

                        </g>
                          <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
                                <text x="82%" y="55%" id="durTime">00:00</text>
                                <text x="18%" y="55%" id="curTime">00:00</text>
                          </g>
                        </svg>
                </div>
        <divclass="lrcShow" data-lrc='你的承诺败给时间'></div>
</div>

<script type="text/javascript">
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
let pics = [
"https://file.uhsea.com/2501/cf464f54fbaa32f1205a5ca37f7983b9V4.jpg ",
"https://file.uhsea.com/2501/41a258157f58e434d1f1147e43c4ef8d4N.jpg",
"https://file.uhsea.com/2501/5fbd146e1c895584cf3df1241d867f173J.jpg",
"https://file.uhsea.com/2501/830aaf69a8558f0276a3b140081b71bcF9.jpg",
"https://file.uhsea.com/2501/b5282fa4568027d0a2756984a7bfdd4051.jpg",
"https://file.uhsea.com/2501/a4521a4a7bedcef597af541eaeb19d1eOL.jpg",
"https://file.uhsea.com/2501/011d2a9577e7382ae0fbafaccc11177dKX.jpg",
"https://file.uhsea.com/2501/06430b4568855753d75fb5fac6170a794E.jpg"
];

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 1422 800`});
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':1422, 'height':800, '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+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
你的承诺败给时间

作曲：曲多美作词：老邪神
演唱：L（桃籽）
编曲：Eva
和声编写、和声：谌宥
制作人：老邪神、Eva
想你一天又一天
孤单还是没改变
我多想能再见你一面
在这寒冷的冬天
回忆一遍又一遍
不知熬过多少夜
你说过会爱我到永远
最后却没有兑现
你的承诺再真终究败给时间
怪我用情太深才会被你欺骗
你用一程陪伴换我一生怀念
我守着回忆一次次哭红了双眼
你的承诺再真终究败给时间
怪我太傻太笨信了你的谎言
我付出那么多你却都看不见
明知道和你没结果我还在原地留恋
。。。。。。
回忆一遍又一遍
不知熬过多少夜
你说过会爱我到永远
最后却没有兑现
你的承诺再真终究败给时间
怪我用情太深才会被你欺骗
你用一程陪伴换我一生怀念
我守着回忆一次次哭红了双眼
你的承诺再真终究败给时间
怪我太傻太笨信了你的谎言
我付出那么多你却都看不见
明知道和你没结果我还在原地留恋
你的承诺再真终究败给时间
怪我用情太深才会被你欺骗
你用一程陪伴换我一生怀念
我守着回忆一次次哭红了双眼
你的承诺再真终究败给时间
怪我太傻太笨信了你的谎言
我付出那么多你却都看不见
明知道和你没结果我还在原地留恋
谢谢欣赏
`;

var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        //aaaudioURL:'https://music.163.com/song/media/outer/url?id=179521.mp3'
        audioURL:'https://file.uhsea.com/2501/ab8305929edb40b7f311a9b592d43d46MA.mp3'
};
let lrcPlayer = new lrcPlayerY(opts);
        //        格式化时间数据
        let formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
        //        计算/设置控制路径有关的数据
        let circlePoints = [];
        let bgcLen = bgc.getTotalLength();
        fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
       
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        //        在 timeupdate 事件处理中添加与控制路径有关的处理
        lrcPlayer.mObj.addEventListener('timeupdate', function() {
                let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
                fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
                durTime.textContent = formatTime(lrcPlayer.mObj.duration);
                curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
        });
        //        动态元素监测
        let runState = () => {
                lrcPlayer.mObj.paused
                        ? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
                        : (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
        }
        //        SVG viewBox 与 实际尺寸的比值
        let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
        let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
        //console.log(factorX, factorY);
        //        歌曲进度条鼠标移动处理
        let seeking = false;
        let moveEventProc = (event)        =>        {
                if(!seeking)        return;
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
                        let mv = mx*mx + my*my;
                        if(mv < minV)        {
                                minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / bgcLen;
                let chkTime = lrcPlayer.mObj.duration * chkVal;
                fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

                let fIdx = false;
                lrcPlayer.lrcVec.forEach((lrc,idx) => {
                        if(!fIdx && lrc.seconds >= chkTime )        {
                                fIdx = !fIdx; lrcPlayer.idx = idx;
                                lrcPlayer.mObj.currentTime = chkTime;
                                return fIdx;
                        }
                });
        };
       
        fgc.addEventListener("mousemove", (event) => moveEventProc(event));
        bgc.addEventListener("mousemove", (event) => moveEventProc(event));
        fgc.onclick = bgc.onclick = (event) => seeking = !seeking;                

        //        歌曲、歌词 及 动态元素 启/停控制
        mCtrl.onclick = () => {
                lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
        }
        lrcPlayer.mObj.addEventListener('play', () => runState());
        lrcPlayer.mObj.addEventListener('pause', () => runState());
        lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>

小辣椒 发表于 2025-2-2 20:30

@起个网名好难

谢谢难难的图片转换代码，这个渐进渐出的代码太喜欢了，学习做一个，送给难难{:4_179:}

小辣椒 发表于 2025-2-2 20:31

也是祝难难新年快乐，万事如意，蛇年大吉！

小辣椒 发表于 2025-2-2 20:32

新年送一个美女{:4_170:}

梦油 发表于 2025-2-2 20:55

俺也来听歌哦。

花飞飞 发表于 2025-2-2 20:55

支持小辣椒作品，祝小辣椒新年快乐，事事顺心如意~~{:4_187:}

花飞飞 发表于 2025-2-2 20:56

代码效果绝美，小播设计得也漂亮，色彩更是高贵典雅~~非喜耐看又喜欢的作品。。{:4_187:}

樵歌 发表于 2025-2-2 21:03

悄悄来听{:4_208:}

樵歌 发表于 2025-2-2 21:04

画面很潮很燃有范！

小辣椒 发表于 2025-2-2 21:31

梦油 发表于 2025-2-2 20:55
俺也来听歌哦。

梦油晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2025-2-2 21:34

花飞飞 发表于 2025-2-2 20:55
支持小辣椒作品，祝小辣椒新年快乐，事事顺心如意~~

啊~~飞飞我就套用难难的代码，主要喜欢这个图片转换效果非常流畅，N年图片转换就这种效果，现在的代码统统不能出来了，看见难难的代码赶紧玩一个

小辣椒 发表于 2025-2-2 21:36

花飞飞 发表于 2025-2-2 20:56
代码效果绝美，小播设计得也漂亮，色彩更是高贵典雅~~非喜耐看又喜欢的作品。。

代码全部是难难的，这些图图是14年的，我只是放大了尺寸，以前都是1000宽的图，现在稍作了修改而已，图图不能和飞飞比的{:4_173:}

小辣椒 发表于 2025-2-2 21:37

樵歌 发表于 2025-2-2 21:03
悄悄来听

瞧哥哥你尽管大大方方的听，哈哈，送难难主要是美女{:4_170:}

小辣椒 发表于 2025-2-2 21:38

樵歌 发表于 2025-2-2 21:04
画面很潮很燃有范！

纯为了配歌词选的图{:4_189:}

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

这些图图还是成系列的，优雅迷人，非常漂亮的制作。
欣赏亲爱的好帖{:4_199:}

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

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

庶民 发表于 2025-2-3 07:13

偷听的人来了。

梦江南 发表于 2025-2-3 08:29

这种图片转换非常漂亮，赞啦！

新年快乐！六六大顺！{:4_179:}

梦油 发表于 2025-2-3 16:28

小辣椒 发表于 2025-2-2 21:31
梦油晚上好，谢谢欣赏

我不会唱，但我喜欢听。

小辣椒 发表于 2025-2-3 17:21

红影 发表于 2025-2-2 21:48
这些图图还是成系列的，优雅迷人，非常漂亮的制作。
欣赏亲爱的好帖

亲爱的，这个图片本来就是做图片转换效果的，只是以前的代码统统没有用了，看见难难的代码特别开心就直接玩一次，这个转换效果特别流畅。
页: [1] 2 3
查看完整版本: 你的承诺败给时间 TO：难难