姑苏雪最江南

起个网名好难 发表于 2024-12-20 16:57

本帖最后由起个网名好难于 2024-12-20 16:57 编辑 <br /><br /><meta name="referrer" content="never">
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#oBlk {
width:1050px;height:900px;margin:80px auto 40px calc(50% - 606px);
display: grid;background-color:hsl(240, 35%, 95%);
place-items:center;
position:relative;
grid-template-rows:800px 80px;
grid-template-columns:100%;
box-shadow:3px 3px 8px darkgray;
overflow:hidden;border-radius:24px;
padding:4px;font-size:14px;
}
#showSVG {
position:relative; width:1000px; padding:8px;overflow:hidden; border-radius:12px; background-color:snow;
overflow:hidden;border-radius:12px;box-shadow:4px 4px 10px black;margin:auto;
}
#picture {
-webkit-mask-image: radial-gradient(black 23%, transparent 85%);
-webkit-mask-size: cover;z-index:1;border-radius:16px;
}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 楷体;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
z-index:99;left:40%;bottom:-15px;color:hsla(240,60%, 90%, 0.7);
}
#processMeter {position: absolute; left:10px; bottom:0px; 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)}}
.bjt {filter:grayscale(1);}
</style>
<div id="oBlk">

<div id="showSVG"></div>
<div id="lrc">
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
   <
   <g stroke-width="8">
<path id="bgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="Chocolate" fill="none"></path>
<path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="pink" fill="none"></path>
   </g>
<defs>
            <clipPath id="clip">
            <circle cx="100" cy="50" r="41" />
            </clilpPath>
         </defs>
<image xlink:href="https://pics2.baidu.com/feed/7af40ad162d9f2d3f159d90d893e121e6127ccec.jpeg@f_auto?token=bd6f1fa88fc8bd22e17ba2e0454f2d48" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
   <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font:bold 24px;">
<text x="82%" y="50%" id="durTime">00:00</text>
<text x="18%" y="50%" id="curTime">00:00</text>
   </g>
</svg>
</div>
<div class="lrcShow" data-lrc="姑苏雪最江南"></div>
</div>
</div>

<script>
let pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMVd1Z7NlsaAIIiam1FyDdX1GMgJhCfgo6NNHQTm0o37OKhxDqtqnqWwQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMwsW4Ns2fvvgoe3G5uN7pU2bGqEPeuwyAvlN3WLibnDlxGcgCNTuCXTA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMwAENEfLajr4pSrKUPyVrL8nibIvHDQkgwqDxDk5I40GlIlW566oM2Aw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMKWicv2s4DFcQfTGTAgeOxicSHmMPDRAw5ykU5kMFgbAf6o9nEj0XnP4w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMO8rQ1ZzIbWic47fxa3icP82ZY6wTAx9Gn5ecqXHXOafTxkBmZmN8iaecQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOM60miaiaWn5O3VT7BqrY9U3MiaicMfYvhXibAcT3G9H2miaP8fHaYK2Vs1Dsg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOM2tmibnTnRTXzNAFkn5oAicolDQHe441XhIjQpF4807EF5qNCicDssAsrA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMDIMBXpyVmiaFLz7kFjYu2ngy6jsNf5FHckhMDTPIxzqv7KmE46SUBIw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMWVwZpZociawUlrbrv9PXzETdrL5pwc9hcjQqg0UTOVthkeib58q7uVEA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMQmo03ia1WhVPJNWNhibFOD7zK4u3tic5Fd3ayfK6HuWgz9bX640L6537w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMocrf2I8AHLFwcLGGKSgMUibdsNo4jlIJrMic1y6H1Q0eFlicK9qOia2amw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMviaiagu6YuXL8RgQ77urvgdovPiaek9LN9nPHkkZ8CTEkHnPY9TZTtviaw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMEMJ7P9qKtOY9WEtyEfNRVg2vzjgfhx9zABuC42hxIyNiaf7uJGmQDwg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMtVxqx4IBwBAYfDg7TsMl4LLgvpw1N6DAnb8ibhBL9LUZAB9aUCwjRZg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK5ymhfpYRddceHkgIIWVfOMia2OcBAmexXOs0rVviaeYPw7BTS9JEbicXagh4ReujagVQ8FmkNUm8iaOQ/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 rows = 3, cols = 5 ,pWidth = 1080, factor=rows<cols?rows:cols, pHeight = 1440;
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 ${pWidth * cols} ${pHeight * rows}`});

pics.forEach((url,idx) => {
let rowPos = (idx % cols) * pWidth, colPos = parseInt(idx/cols) * pHeight, beginStr = idx == 0 ? '0;clrs.end+1' : `ep${idx-1}.end-0.5`;
let showPosX = ((cols - factor) * pWidth) / 2, showPosY = ((rows - factor) * pHeight) / 2;
genTagObj(mysvg,{'tag':'image', 'xlink:href':url, 'width':pWidth, 'height':pHeight, 'x':rowPos, 'y':colPos, 'opacity':0.25, 'preserveAspectRatio':'none', 'class':'bjt'});
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':url, 'width':pWidth, 'height':pHeight, 'x':rowPos, 'y':colPos, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':2, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'from':rowPos, 'to':showPosX , 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'from':colPos, 'to':showPosY, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'from':pWidth, 'to':factor * pWidth, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':pHeight, 'to':factor * pHeight, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});

aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'to':rowPos, 'from':showPosX, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze', 'id':`ep${idx}`});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'to':colPos, 'from':showPosY, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'to':pWidth, 'from':factor * pWidth, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':pHeight, 'from':factor * pHeight, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
if(idx == (pics.length - 1))
aniObj = genTagObj(imgObj,{'tag':'animate', 'id':"clrs", 'attributename':'opacity', 'to':0, from:1, 'begin':`bp${idx}.begin+15`,'dur':2, 'fill':"freeze"});
else
aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'opacity', 'to':0, 'from':1, 'dur':2, 'begin':'clrs.begin', 'fill':'freeze'});

});
showSVG.innerHTML = mysvg.outerHTML;

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};
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 = () => {
const lrctxt = `
小重山·姑苏雪
作词：君山
作曲：吴泗滨
演唱：叶莲娜
柳岸儿隐隐飞冰雪
小桥儿翠笛幽
玲珑诀啊玲珑诀玲珑诀
灵山钟磬晓燕鹊江南月
芊指儿拂春雀拂春雀
红颜儿萍水绝
丝丝儿些许雨
情难越啊情难越
素衣乌篷春桥决人儿瘦
凭栏儿逗蝴蝶逗蝴蝶
柳岸儿隐隐飞冰雪
小桥儿翠笛幽
玲珑诀啊玲珑诀玲珑诀
灵山钟磬晓燕鹊江南月
芊指儿拂春雀拂春雀
红颜儿萍水绝
丝丝儿些许雨
情难越啊情难越
素衣乌篷春桥决人儿瘦
凭栏儿逗蝴蝶逗蝴蝶
逗蝴蝶
`;

let opts = {
lrcTxt:lrctxt,
audioURL:"https://cccimg.com/view.php/34789bff088ed5f58498be2897435a34.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>

醉美水芙蓉 发表于 2024-12-20 17:21

起个网名好难 发表于 2024-12-20 18:16

醉美水芙蓉发表于 2024-12-20 17:21
老师的图图真漂亮！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

老谟深虑 发表于 2024-12-20 18:36

欣赏老师的佳作，点赞！

起个网名好难 发表于 2024-12-20 18:50

老谟深虑发表于 2024-12-20 18:36
欣赏老师的佳作，点赞！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

樵歌发表于 2024-12-20 19:36

果然是姑苏漂亮的白雪梅花！唱的也是江南翠生生的小声音。好听！

起个网名好难 发表于 2024-12-20 19:37

樵歌发表于 2024-12-20 19:36
果然是姑苏漂亮的白雪梅花！唱的也是江南翠生生的小声音。好听！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

杨帆发表于 2024-12-20 20:00

漂亮的图片轮播，鲜明的地方特色，独特的饕餮大餐，谢谢老师精彩分享{:4_191:}

起个网名好难 发表于 2024-12-20 20:39

杨帆发表于 2024-12-20 20:00
漂亮的图片轮播，鲜明的地方特色，独特的饕餮大餐，谢谢老师精彩分享

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影发表于 2024-12-20 21:06

漂亮的图片轮播方式，这样的江南雪景还是不多的，上海好多年没像样的雪景了，苏州应该也差不多呢{:4_173:}

红影发表于 2024-12-20 21:09

图片里好多小灯笼，播放器按钮也换成了风景的。
欣赏难难好帖{:4_199:}

小辣椒 发表于 2024-12-20 22:30

难难很好奇，咋这些图片和音乐怎么就会找得到，而且还有链接的，小辣椒太佩服了{:4_178:}

小辣椒 发表于 2024-12-20 22:32

漂亮的图片转换特效代码，而且各个尺寸都有，难难自己的制作是轻车熟路的，我上次套用都测试了好几次的，太有才了{:4_205:}

起个网名好难 发表于 2024-12-21 06:27

红影发表于 2024-12-20 21:09
图片里好多小灯笼，播放器按钮也换成了风景的。
欣赏难难好帖

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-12-21 06:29

红影发表于 2024-12-20 21:06
漂亮的图片轮播方式，这样的江南雪景还是不多的，上海好多年没像样的雪景了，苏州应该也差不多呢

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F04%2F1817%2F220325874_6_20210418050301739&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1737325766&t=d59ed891350e9be6a4a961a36d5de630

起个网名好难 发表于 2024-12-21 06:32

小辣椒发表于 2024-12-20 22:30
难难很好奇，咋这些图片和音乐怎么就会找得到，而且还有链接的，小辣椒太佩服了

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

图片都是微信公众号上的，再找合适些的歌曲就成了。

起个网名好难 发表于 2024-12-21 06:33

本帖最后由起个网名好难于 2024-12-21 06:35 编辑

小辣椒发表于 2024-12-20 22:32
漂亮的图片转换特效代码，而且各个尺寸都有，难难自己的制作是轻车熟路的，我上次套用都测试了好几次的，太 ...
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F05%2F0812%2F221616290_3_20210508120159958&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1737325982&t=bd2b973d110ff2ea2212f1d6da11dd94

我很懒，用现成的模式改几个数值就成了新帖子{:5_102:}

梦江南 发表于 2024-12-21 08:47

欣赏老师精美的特效音画：姑苏雪最江南！冬至快乐！

起个网名好难 发表于 2024-12-21 09:08

梦江南发表于 2024-12-21 08:47
欣赏老师精美的特效音画：姑苏雪最江南！冬至快乐！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2017%2F12%2F0321%2F118002255_2_20171203093758147&refer=http%3A%2F%2Fimage109.360doc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1737335275&t=3884e0b502ff60ae82ec23818b2af102

红影发表于 2024-12-21 11:23

起个网名好难发表于 2024-12-21 06:27

问好难难，周六快乐{:4_187:}

页: [1] 2

花潮论坛's Archiver

姑苏雪 最江南

姑苏雪最江南