试试网名老师的《二十四节气》一贴在我的电脑上有无显示

寒冬残荷 发表于 2022-11-12 13:35

本帖最后由寒冬残荷于 2022-11-18 00:20 编辑 <br /><br /><style type="text/css">
#jqt {width:640px;padding:8px;margin:32px auto; overflow:hidden;border-radius:24px;background:#cccccc;}

.lyricDisp{filter:drop-shadow(#ffffff 1px 0 0) drop-shadow(#ffffff 0 1px 0) drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);font-family:微软雅黑;transition:.3s all ease;font-size:1.5em;}
.lyricDisp:nth-child(1){color:gray;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:darkred;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:1.2em;}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}

#LRCShow{position:absolute;left:25%;bottom:-30px;width:80%;height:100px;margin:16px auto
position:relative;}#rdisk{position:absolute;left:16%;bottom:10px;font-size:3em;color:red;cursor:pointer;animation:circleSmall2 10s linear infinite;animation-play-state:paused;}
@keyframes circleSmall2{0%{transform:rotateX(30deg) rotateY(-45deg) rotateZ(0deg);}100%{transform:rotateX(30deg) rotateY(-45deg) rotate(360deg);}}

</style>

<div style="width:800px;position:relative;height:auto !impotant;min-height:1000px;">
<div id="jqt"></div>
<div id="rdisk">❄</div>
<div id="LRCShow"></div>
</div>



<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(opts.lrcDoc);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;this.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx>=that.lrcVec.length)return;if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},}
</script>

<script type="text/javascript">
(function() {
let pics = [
"http://p4.itc.cn/q_70/images03/20200722/bf01c9b1e8c24a59bb3543ec60d18e8f.gif",
"http://p6.itc.cn/q_70/images03/20200722/cf811ebc5ef545bca26a0e96b497a883.gif",
"http://p3.itc.cn/q_70/images03/20200722/a6eb4a8afdba404abf173cc828c7b5f8.gif",
"http://p4.itc.cn/q_70/images03/20200722/0325da72eff344c780420effcb77b96a.gif",
"http://p6.itc.cn/q_70/images03/20200722/fe1939c1a6ba4496b6449999edb0b10d.gif",
"http://p8.itc.cn/q_70/images03/20200722/f9c49aea524143e7a89002897ae80ba3.gif",
"http://p3.itc.cn/q_70/images03/20200722/0ff9ffeb124c4873af31699c6cf62034.gif",
"http://p1.itc.cn/q_70/images03/20200722/0d1ffddaf79b43e48e6809cfdcacfe17.gif",
"http://p7.itc.cn/q_70/images03/20200722/b14c84fa6f2541ec8db2759b30161c71.gif",
"http://p1.itc.cn/q_70/images03/20200722/cf95f402bbed493fbafac490c02fecf9.gif",
"http://p1.itc.cn/q_70/images03/20200722/444e1c8efed8451db8c2e5461639ca6f.gif",
"http://p0.itc.cn/q_70/images03/20200722/4b056de99ed24777ad3aee2a1852ade9.gif",
"http://p0.itc.cn/q_70/images03/20200722/61a4f880962042caa4ca21c6ff2183d6.gif",
"http://p4.itc.cn/q_70/images03/20200722/cdfebe1d0b484b0ea61be373b85c7fe3.gif",
"http://p1.itc.cn/q_70/images03/20200722/2e1b089dbbfa4db1be25c0bc9527ad67.gif",
"https://www.kumeiwp.com/sub/filestores/2022/11/12/a42ecbfc5501c3a149ad694f2e6ed8a8.jpg",
"http://p3.itc.cn/q_70/images03/20200722/e357ddb407744c71a0da8b3c3ef71f38.gif",
"http://p9.itc.cn/q_70/images03/20200722/5c53f5546dcd422d8cbaf182ee2b6d37.gif",
"http://p8.itc.cn/q_70/images03/20200722/731734a7d19a432784884fda8be50030.gif",
"http://p2.itc.cn/q_70/images03/20200722/9f7a799b16ac4ec1957c5d5cc6ab5826.gif",
"http://p5.itc.cn/q_70/images03/20200722/d4886411016246dcb730b78c5f0358d0.gif",
"http://p1.itc.cn/q_70/images03/20200722/745641afbb2244f99fe7e96e3dfc15da.gif",
"http://p1.itc.cn/q_70/images03/20200722/418f46f5c9e245139c8fb952299cae11.gif",
"http://p4.itc.cn/q_70/images03/20200722/349fadc9095d4310abf3f92079a79f71.gif"
];
let lrctxt = `
二十四节气歌 - 闫学晶
打春阳气转雨水沿河边
惊蛰乌鸦叫春分地皮干
清明忙种麦谷雨种大田
哎唻哎嗨哎嗨哟春呀吗春天
立夏鹅毛住小满雀来全
芒种开了铲夏至不拿棉
小暑不算热大暑三伏天
哎唻哎嗨哎嗨哟夏呀吗夏天
立秋忙打甸处暑动刀镰
白露割蜜薯秋分不生田
寒露不算冷霜降变了天
哎唻哎嗨哎嗨哟秋呀吗秋天
立冬交十月小雪地封严
大雪河汊牢冬至不行船
小寒大寒冰如铁迎来又一年
盼望冰消雪化艳阳天
哎唻哎嗨嗯哎哎嗨哟

`;
var opts = {
lrcDoc:lrctxt,
audioURL:"https://www.qqmc.com/up/kwlink.php?id=5405556&.mp3",
lrcShowID:"LRCShow",
audioCtrl:'rdisk'
};
new lrcPlayer2(opts);
let jqt = document.querySelector('#jqt');
let svgContent = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewbox="0 0 640 1080">`;

let viewWidth = 640;
let viewHeight = 1080;
jqt.onclick = () => {
let mp = document.querySelector('#mp');
if(mp.paused) mp.play();
}
let makeImageObj = (url, width,height,idx) => {
let ratioX = viewWidth / width;
let ratioY = viewHeight / height;
let scaleRatio = ratioX < ratioY ? ratioX : ratioY;
let imgObjStr ="";
imgObjStr += `<image id="p${idx}" xlink:href="${url}" width="${width * scaleRatio}" `;
imgObjStr += `height="${height * scaleRatio}" x="0" y="${(viewHeight - height * scaleRatio) / 2}" `;
imgObjStr += `opacity="0" preserveAspectRatio="none">\n`;
imgObjStr += `<animate id="fpic${idx}" attributename="opacity" from="0" to="1" dur="2s" `;
let bt = idx == 0?`0;e${pics.length-1}.end-2`:`e${idx-1}.end-2`;
imgObjStr += `begin="${bt}" fill="freeze" ></animate>\n`;
imgObjStr += `<animate id="e${idx}" attributename="opacity" from="1" to="0" dur="2s" `;
imgObjStr += `begin="fpic${idx}.begin+10" fill="freeze" ></animate>\n</image>\n`;
return imgObjStr;
}
let imgSize = new Array(), errCount=0;
let getPictureSize = (url, idx) => {
let img = new Image();
img.src = url;
img.onerror = () => {
console.log(url+" 图片加载失败，请检查url是否正确");
errCount++;
return false;
};
img.onload = () => {
//console.log('load ' + img.width+" "+img.height);
img.onload=null;//避免重复加载
let imgObjStr = makeImageObj(url, img.width, img.height, idx);
imgSize.push(imgObjStr);
}
}
for(idx = 0; idx < pics.length; idx++) {
getPictureSize(pics,idx);
}
let dataReady = () => {
if(imgSize.length != pics.length) setTimeout(dataReady,100);
else {
for(n=0;n<imgSize.length;n++) {
svgContent += imgSize;
}
jqt.innerHTML = svgContent + "</svg>\n";
}
}
dataReady();
})();
//https://blog.csdn.net/joyopirate/article/details/126589331
</script>

寒冬残荷 发表于 2022-11-12 13:40

我上面用别的网站的图片地址换了老师的图片网站地址能正常显示呀！为什么老师放图片的网站，我的浏览器读不了，别人的可以读？

寒冬残荷 发表于 2022-11-12 14:52

怪了，不是说这里只能显示https的吗？可是上面我使用的是http的呀？不知道别人能看到吗？

红影发表于 2022-11-12 17:35

我能看到，很漂亮的动图{:4_187:}

寒冬残荷 发表于 2022-11-17 22:20

寒冬残荷 发表于 2022-11-17 22:22

麻烦了，网站不给用JS插件，删除都删除不了。

醉美水芙蓉 发表于 2022-11-22 20:31

页: [1]

花潮论坛's Archiver

试试网名老师的《二十四节气》一贴在我的电脑上有无显示