老师，我的手机和电脑也都看不了，是GIF图片的问题，音乐部分手机的和电脑都正常。
一长条！有音乐！
寒冬残荷 发表于 2022-11-11 23:59
老师，我的手机和电脑也都看不了，是GIF图片的问题，音乐部分手机的和电脑都正常。
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670590758&t=1a6d62045e90a8f77d11933dd78e29db
寒冬残荷 发表于 2022-11-11 23:59
老师，我的手机和电脑也都看不了，是GIF图片的问题，音乐部分手机的和电脑都正常。
这帖也没什么特别的，就是让不同大小的图片能居中摆放。
看不到的原因是图库网站拒绝访问，这个没法解决因为找不到其他能允许上传gif图片的网站。
亚伦影音工作室 发表于 2022-11-12 02:36
一长条！有音乐！
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zdwx.net%2Fgroup7%2FM00%2F09%2F77%2FwKgCEmFmKPWANgnoAACTKQEeOHs321.gif&refer=http%3A%2F%2Fimg.zdwx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670590758&t=1a6d62045e90a8f77d11933dd78e29db
没办法，图库网站拒绝访问。
本帖最后由 寒冬残荷 于 2022-11-12 09:37 编辑
起个网名好难 发表于 2022-11-12 06:46
这帖也没什么特别的，就是让不同大小的图片能居中摆放。
看不到的原因是图库网站拒绝访问，这个没法解 ...
老师，如果有别的电脑浏览器和手机能看到图片播放，那是不是我的浏览器和手机的问题呢？我发现我的电脑浏览SVG代码的要么很久很久才出现画面，要么没有画面出现。
我刚才把代码换成了JPG的图片地址放到zhonghua网运行也不行，所以我才有我的电脑浏览器支持SVG有问题的想法。
<style type="text/css">
#jqt {width:640px;padding:8px;margin:32px auto;overflow:hidden;border-radius:24px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtQMMn.jpg);}
.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>
<!--audio src="https://www.qqmc.com/up/kwlink.php?id=5405556&.mp3" loop autoplay id="mp"></audio-->
<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 = [
"https://s4.ax1x.com/2021/12/14/oxFdeg.jpg",
"https://s4.ax1x.com/2021/12/14/oxFUOS.jpg",
"https://s4.ax1x.com/2021/12/14/oxFNy8.jpg",
"https://s4.ax1x.com/2021/12/14/oxFtQf.jpg",
"https://s4.ax1x.com/2021/12/14/oxFYSP.jpg",
"https://s4.ax1x.com/2021/12/14/oxFGWt.jpg",
"https://s4.ax1x.com/2021/12/14/oxF8JI.jpg",
"https://s4.ax1x.com/2021/12/14/oxF3FA.jpg",
"https://s4.ax1x.com/2021/12/14/oxFlod.jpg",
"https://s4.ax1x.com/2021/12/14/oxFQdH.jpg",
"https://s4.ax1x.com/2021/12/14/oxFMee.jpg",
"https://s4.ax1x.com/2021/12/14/oxFuLD.jpg",
"https://s4.ax1x.com/2021/12/14/oxFnsO.jpg",
"https://s4.ax1x.com/2021/12/14/oxFmQK.jpg",
"https://s4.ax1x.com/2021/12/14/oxFZz6.jpg",
"https://s4.ax1x.com/2021/12/14/oxFVRx.jpg",
"https://s4.ax1x.com/2021/12/14/oxFEJ1.jpg",
"https://s4.ax1x.com/2021/12/14/oxFAiR.jpg",
"https://s4.ax1x.com/2021/12/14/oxFFo9.jpg",
"https://s4.ax1x.com/2021/12/14/oxFidJ.jpg",
"https://s4.ax1x.com/2021/12/14/oxF9LF.jpg",
"https://s4.ax1x.com/2021/12/14/oxFpsU.jpg",
"https://s4.ax1x.com/2021/12/14/oxFSMT.jpg",
"https://s4.ax1x.com/2021/12/14/oxixzV.jpg"
];
let lrctxt = `
青衣 - 草帽酱
（此版本为正式授权翻唱作品）
我为你唱一曲
如游丝的气息
谁在抚琴配相思成疾
我为你梦入戏
再续前世迷局
戏中人一滴泪
便纷乱相思雨
风和沙纠缠到天涯
最后亦落下
你和我分手在街口
湮灭了繁华
恍如隔世的烟雨楼台呀
青衣顾盼流离寒鸦
光和影在歌榭亭台
蜿蜒游离扭曲
两个人一场戏
剩涟漪无影息
那真心付了几许多可惜
听戏人叹流年忆往昔
我为你唱一曲
如游丝的气息
谁在抚琴配相思成疾
我为你梦入戏
再续前世迷局
戏中人一滴泪
便纷乱相思雨
我为你唱一曲
忘忧的战局
谁倾城美丽别过了虞姬
我为你把酒续
续今生别离
你泪沾梨花
梨花却惹乱离人戏
光和影在歌榭亭台
蜿蜒游离扭曲
两个人一场戏
剩涟漪无影息
那真心付了几许多可惜
听戏人叹流年忆往昔
我为你唱一曲
如游丝的气息
谁在抚琴配相思成疾
我为你梦入戏
再续前世迷局
戏中人一滴泪
便纷乱相思雨
我为你唱一曲
忘忧的战局
谁倾城美丽别过了虞姬
我为你把酒续
续今生别离
你泪沾梨花
梨花却惹乱离人戏
`;
var opts = {
lrcDoc:lrctxt,
audioURL:"https://www.qqmc.com/up/kwlink.php?id=165884773&.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 09:32
老师，如果有别的电脑浏览器和手机能看到图片播放，那是不是我的浏览器和手机的问题呢？我发现我的电脑浏 ...
浏览器只要不是很老的版本都应该是支持SVG的，看不到的原因是图片没装载进来和SVG没关系吧。
27楼是和1楼同样的代码只是换了图片和歌曲，图片是另一个图库的并且是jpg，您能看到吗？
发这帖的电脑1楼也看不到。
寒冬残荷 发表于 2022-11-12 09:32
老师，如果有别的电脑浏览器和手机能看到图片播放，那是不是我的浏览器和手机的问题呢？我发现我的电脑浏 ...
您可以试试链接 https://imgurl.org 这个网站看看是什么情况。
起个网名好难 发表于 2022-11-12 11:25
浏览器只要不是很老的版本都应该是支持SVG的，看不到的原因是图片没装载进来和SVG没关系吧。
27楼是和 ...
老师，中午好！27楼的看得到。
起个网名好难 发表于 2022-11-12 11:33
您可以试试链接 https://imgurl.org 这个网站看看是什么情况。
这个图床我没有注册。我点击打开了，网站提示：……未注册用户不再支持上传。
寒冬残荷 发表于 2022-11-12 13:18
老师，中午好！27楼的看得到。
至少说明代码没问题
起个网名好难 发表于 2022-11-12 13:28
至少说明代码没问题
用别的网站的地址我的电脑浏览器能正常显示
起个网名好难 发表于 2022-11-12 13:28
至少说明代码没问题
那么，老师，我的问题来了：为什么老师放图片的网站，我的浏览器读不了，别人的可以读？{:5_102:}
只要有耐心就可以看见{:4_170:}
链接不够流畅，动图文件也是大，而且多，发现你图片大小不一，高低不一样，歌词同步出来有的在背景图，有的在动图上了
寒冬残荷 发表于 2022-11-12 13:45
那么，老师，我的问题来了：为什么老师放图片的网站，我的浏览器读不了，别人的可以读？
是啊，连我自己也不是任何设备上都能看到，确实是个奇怪的事。
小辣椒 发表于 2022-11-12 14:01
只要有耐心就可以看见
在能看到的情况下，第一次加载是需要点时间。
小辣椒 发表于 2022-11-12 14:03
链接不够流畅，动图文件也是大，而且多，发现你图片大小不一，高低不一样，歌词同步出来有的在背景图，有的 ...
看不到的情况下只有背景一小条。
帖子没什么特点，但图片大小不一恰巧是我试验的目的：无论大小图片都显现垂直居中。
除第一次打开帖子外，其它时候是秒开。
小辣椒 发表于 2022-11-12 14:01
只要有耐心就可以看见
有耐心了，打开一上午放着都没有看到动图显示出来。我刚才换了图片地址放在存图试贴那里秒显示。应该是我的浏览器不能访问网名老师放动图的那个网站。