长假快乐 --- 再试试看还有没有问题
本帖最后由 起个网名好难 于 2022-10-10 23:11 编辑 <br /><br /><style type="text/css">@charset "utf-8";div.container{position:relative;height:660px;width:100%;overflow:hidden;border-radius:5px;}div#ipresenter div#preloader{position:absolute;display:block;width:200px;height:6px;z-index:200;border-radius:4px;padding:1px;-webkit-transform:translate(-100px,0px);-moz-transform:translate(-100px,0px);-o-transform:translate(-100px,0px);-ms-transform:translate(-100px,0px);transform:translate(-100px,0px);}div#ipresenter div#preloader div{display:block;width:0%;height:6px;border-radius:3px;}div#ipresenter div.step{display:block;text-align:center;z-index:10;background:rgba(255,255,255,0.3);color:#000;padding:10px;box-shadow:3px 3px 0px rgba(0,0,0,0.2);}div#ipresenter div.step img{max-height:600px;}.ipresenter-controlNav{position:absolute;bottom:0px;left:50%;-webkit-transform:translate(-50%,0%);-moz-transform:translate(-50%,0%);-o-transform:translate(-50%,0%);-ms-transform:translate(-50%,0%);transform:translate(-50%,0%);height:44px;}.ipresenter-controlNav a{text-indent:-9999px;}.ipresenter-controlNav a.ipresenter-controlPrevNav{float:left;width:50px;height:44px;background:url('../images/slider-controls.png') no-repeat;}.ipresenter-controlNav a.ipresenter-controlNextNav{float:left;width:50px;height:44px;background:url('../images/slider-controls.png') no-repeat -50px 0px;}.ipresenter-controlNav div.ipresenter-items{float:left;padding:0px 10px 0px 10px;height:44px;background:url('../images/nav-bg.png');}.ipresenter-controlNav div.ipresenter-items ul{list-style:none;}.ipresenter-controlNav div.ipresenter-items ul li{float:left;position:relative;}.ipresenter-controlNav a.ipresenter-control{padding:0px;float:left;width:11px;height:12px;background:url('../images/bullets.png') no-repeat;margin:3px;margin-top:16px;line-height:0px;}.ipresenter-controlNav a.ipresenter-control.active{background-position:0px -12px;}.ipresenter-controlNav div.ipresenter-items div.ipresenter-tooltip{display:none;position:absolute;background:url('../images/tooltip.png') no-repeat;width:124px;height:90px;bottom:30px;left:-64px;padding:10px;z-index:100;}.ipresenter-controlNav div.ipresenter-items div.ipresenter-tooltip div{display:block;width:124px;height:84px;overflow:hidden;border-radius:2px;}.ipresenter-controlNav div.ipresenter-items div.ipresenter-tooltip img{display:block;width:124px;} .step img {width:480px;border:thin gray solid;overflow:hidden;border-radius:24px;}
.lrcShow{font:bold 3em sans-serif;position:absolute;bottom:20px;left:20%;color:white;text-shadow:1px 1px 1px #000;letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}.lrcShow::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);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}.mCtrl{border:2px solid #000000;border-radius:50%;display:inline-block;width:90px;height:90px;margin:0px;position:absolute;bottom:30px;right:30px;transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);background-image:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png);background-position:0 0;background-size:100% 100%;}.z360z{animation:rotating 10s linear infinite;}@keyframes rotating{0%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}100%{transform:rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}}
#container {
width:800px;height:720px;
position:relative;overflow:hidden;
display:grid;place-items:center;
}
.mCtrl {
width:40px;height:40px;left:30px;bottom:10px;
/***/
background-image:url(data/attachment/forum/202209/24/224500cco531c1941cynbf.png);
/***/
}
.lrcShow{bottom:0px;font-size:2.5em; font-family:新宋体;}
</style>
<div id="container">
<div id="ipresenter" ></div>
<divclass="lrcShow" data-lrc=''></div>
<divid="mDisk" class='mCtrl'></div>
</div>
<script type="text/javascript">
document.write('<script type="text/javascript" src="https://www.jq22.com/demo/iPresenter/js/jquery-1.7.1.min.js"><\/script>');
document.write('<script type="text/javascript" src="https://www.jq22.com/demo/iPresenter/js/ipresenter.packed.js"><\/script>');
</script>
<script type="text/javascript">
var lrcPlayerY=function(){return this.init.apply(this,arguments)};lrcPlayerY.prototype={constructor:lrcPlayerY,init:function(opts){lyricTxt=opts.lrcTxt.replace(/(^\s*)|(\s*$)/g,'');this.showLrcObj=document.getElementById(opts.lrcShowID);this.audioCtrl=document.getElementById(opts.audioCtrl);this.lrcShowObj=document.getElementsByClassName('lrcShow');this.lrcVec=this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var parts=lyricTxt.replace(/(^\s*)|(\s*$)/g,"").split(/\r|\n|\r\n/);var lrcs=new Array();for(let index=0;index<parts.length;index++){let chkTime=parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=parts.lastIndexOf(']');if(tIdx>0)lrcTxt=parts.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_0=(+ta)*60+(+ta);if(lrcs.length==0&&_0!=0){lrcs.push({seconds:0,words:'<span style="font-size:50%;">© cesholl</span>'})}lrcs.push({seconds:_0,words:lrcTxt})}}}return lrcs.sort(function(a,b){return(a.seconds-b.seconds)})},showLrc:function(durTime){this.lrcShowObj.innerHTML=this.lrcShowObj.dataset.lrc=this.lrcVec.words;this.lrcShowObj.style.setProperty('--aniName','bgMove'+(this.idx%2));this.lrcShowObj.style.setProperty('--durTime',durTime+'ms');this.lrcShowObj.style.setProperty('--aniPlayState','running');this.idx++},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.autoplay=true;this.mObj.src=mUrl;this.lrcShowObj.appendChild(this.mObj);var that=this;var turn=0;this.idx=0;this.mObj.addEventListener('ended',function(){that.idx=0;that.audioCtrl.classList.remove('z360z');this.play()});this.mObj.addEventListener('play',function(){that.audioCtrl.classList.add('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){if(that.idx==1&&this.currentTime<1){that.mObj.play();return false}that.audioCtrl.classList.remove('z360z');that.lrcShowObj.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.lrcShowObj.style.display='none';that.lrcShowObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(that.idx<that.lrcVec.length){if(this.currentTime>=that.lrcVec.seconds){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec.seconds-that.lrcVec.seconds)*1000-100)}else{that.showLrc((this.duration-that.lrcVec.seconds)*1000-100)}}}});this.audioCtrl.addEventListener('click',function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}})}}
</script>
<script type="text/javascript">
jQuery.noConflict();
var pics=[
"data/attachment/forum/202210/01/135333di7rxzvqjxrd3vly.jpg",
"data/attachment/forum/202210/01/135604jyhnn3vyvnd10nk1.jpg",
"data/attachment/forum/202210/01/135604nwmm2l3p9tzetslf.jpg",
"data/attachment/forum/202210/01/135604s3rd93wcsnrzt66r.jpg",
"data/attachment/forum/202210/01/135604m12mxgxk2l85fwc9.jpg",
"data/attachment/forum/202210/01/135605yk4ftmmhfh0v04kf.jpg",
"data/attachment/forum/202210/01/135605glzijeps8erjieep.jpg",
"data/attachment/forum/202210/01/135605h93weliz9lz99jll.jpg",
"data/attachment/forum/202210/01/135605wglfyy60afw0l202.jpg",
"data/attachment/forum/202210/01/135606jhr67lwrvr746r5h.jpg",
"data/attachment/forum/202210/01/135606xyvqvyqy2zq54avl.jpg",
"data/attachment/forum/202210/01/135606wjymgejy1djjg0yj.jpg",
"data/attachment/forum/202210/01/135607x1jja1zcaoo1rzcj.jpg",
"data/attachment/forum/202210/01/135729ejte9y8869ouayt9.jpg",
"data/attachment/forum/202210/01/135730iiam5o8json5tsai.jpg",
"data/attachment/forum/202210/01/135730s26z22ouego9bx2c.jpg",
"data/attachment/forum/202210/01/135730qmx5x1m24e4bz50x.jpg",
"data/attachment/forum/202210/01/135730umaa7dsen7898gb9.jpg",
"data/attachment/forum/202210/01/135731ahtz7hss5szzxsxr.jpg",
"data/attachment/forum/202210/01/135731os533zzbh33r53hl.jpg",
"data/attachment/forum/202210/01/135731yelnzlur6grax7ag.jpg",
];
var ipresenter = document.querySelector('#ipresenter');
var container = document.querySelector('#container');
jQuery(document).ready(function(){
for(n = 0; n < pics.length; n++) {
e_div = document.createElement('div');
e_div.setAttribute('data-x', n*1000);
e_div.setAttribute('data-y', 0);
e_div.setAttribute('data-pausetime',6000);
switch(n % 6) {
case 0:
//e_div.setAttribute('data-rotate', 180);
break;
case 1:
e_div.setAttribute('data-rotatex', 180);
break;
case 2:
e_div.setAttribute('data-rotatey', 180);
break;
case 3:
e_div.setAttribute('data-rotate', -180);
break;
case 4:
e_div.setAttribute('data-rotatex', -180);
break;
case 5:
e_div.setAttribute('data-rotatey', -180);
break;
}
e_div.className='step';
e_img = document.createElement('img');
e_img.src = pics;
e_div.appendChild(e_img);
ipresenter.appendChild(e_div);
}
jQuery('#ipresenter').iPresenter({
animSpeed: 2000,
timer: 'none',
//timerDiameter: 60,
//timerStroke: 5,
//timerPadding: 5,
//timerColor: '#000',
//timerBg: '#FFF',class="container"
//timerOpacity: 0.4,data-easing="easeInOutQuint"
//onAfterChange: afterChage,
directionNav: false,
controlNav: false
});
jQuery('#ipresenter').style.display = "block";
});
var lrc =`
如果我用寂默当作圆心\n用这一段时间拿来当作半径\n在这属于自己的长假里\nLa La La La Love Song\n还不急着此刻说爱你\n在这样的月色里\n有一些回忆要谨记\n还有一些伤心要忘记\n休息为了我下一个远行\n还没决定走到那里\n让我偷懒闭上眼睛\n不去理会太远的问题\n体会长假里的云淡风轻\n和遇见你生命里的好意\n如果我用寂寞当作圆心\n用这一段时间拿来当作半径\n悼念让自己受伤的爱情\n不预设的旁观爱情\n如果我用寂寞当作圆心\n用这一段时间拿来当作半径\n在这属于自己的长假里\nLa La La La Love Song\n休息为了我下一个远行\n还没决定走到那里\n让我偷懒闭上眼睛\n不去理会太远的问题\n体会长假里的云淡风轻\n和遇见你生命里的好意\n如果我用寂寞当作圆心\n用这一段时间拿来当作半径\n在这属于自己的长假里\nLa La La La Love Song\n如果我用寂寞当作圆心\n用这一段时间拿来当作半径\n悼念让自己受伤的爱情\n不预设的旁观爱情\n但忍不住要告诉你\n高兴能够遇见你\n如果我用寂寞当作圆心\n用这一段时间拿来当作半径\n悼念让自己受伤的爱情\n不预设的旁观爱情\n如果我用寂寞当作圆心\n用这一段时间拿来当作半径\n在这属于自己的长假里\nLa La La La Love Song\nLa La La La\n
`;
var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
audioURL:'https://music.163.com/song/media/outer/url?id=307913.mp3'
};
new lrcPlayerY(opts);
</script>
赞一个！
换页没见问题，可能未设置音频。 哎~~~加分后照样飞出去了{:4_189:} 深秋红枫 发表于 2022-10-9 17:31
赞一个！
换页没见问题，可能未设置音频。
这漫画的音乐真不好配{:5_102:} 本帖最后由 起个网名好难 于 2022-10-9 19:18 编辑
小辣椒 发表于 2022-10-9 17:34
哎~~~加分后照样飞出去了
那就无解了。
核心代码是网上的成熟代码，我只是提供素材（图片）然后组织一下。
其它论坛类似帖子没见有这样的问题，还是在这“水土不服”吧。
顺便告知：刚才试了评分，还好没有飞出去{:5_106:}
这些漫画又有趣又有道理，有意思{:4_187:} 红影 发表于 2022-10-9 19:54
这些漫画又有趣又有道理，有意思
<svg width="100%" height="100%" viewBox="0 0 1000 600"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="
M 100 300 h 800 "/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="transparent"/>
<text font-family="Verdana" font-size="50" stroke="red" fill="yellow">
<textPath xlink:href="#MyPath">
感谢欣赏！
<animate attributeName="startOffset" from="0" to ="800" begin="0s" dur="10s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
起个网名好难 发表于 2022-10-9 20:05
感谢欣赏！
不客气，问好{:4_187:} 起个网名好难 发表于 2022-10-9 18:14
那就无解了。
核心代码是网上的成熟代码，我只是提供素材（图片）然后组织一下。
加分还是飞出去的，但这个问题我估计是JS 你直接链接的问题，上传html出来就不会有这个问题了 醉美水芙蓉 发表于 2022-10-9 21:21
好像只看见换图！播放器和歌词也能看见，其它图片看不见！
那就对了，根本就没有底图等{:5_106:} 小辣椒 发表于 2022-10-9 21:24
加分还是飞出去的，但这个问题我估计是JS 你直接链接的问题，上传html出来就不会有这个问题了
恕我愚钝， JS 直接链接 和 上传html出来 是什么意思？ 你才聪明呢{:4_189:}
直接这些代码html上传你的空间测试一下效果 小辣椒 发表于 2022-10-9 21:33
你才聪明呢
直接这些代码html上传你的空间测试一下效果
http://cesholl.cn3v.work/src/100%E5%A4%9A%E5%B9%B4%E5%89%8D%E7%9A%84%E5%9C%B0%E6%91%8A.html
这是很久以前的一个类似帖子，第一张图片失效了，其余部分还是好的。 起个网名好难 发表于 2022-10-9 21:43
http://cesholl.cn3v.work/src/100%E5%A4%9A%E5%B9%B4%E5%89%8D%E7%9A%84%E5%9C%B0%E6%91%8A.html
这 ...
你这个链接好卡，我一直在转啊转 小辣椒 发表于 2022-10-9 21:46
你这个链接好卡，我一直在转啊转
我这速度还行 小辣椒 发表于 2022-10-9 21:33
你才聪明呢
直接这些代码html上传你的空间测试一下效果
要不是这里的图片在外面不能用（很莫名其妙），就把这帖传到其它网站去试了。 本帖最后由 起个网名好难 于 2022-10-9 22:14 编辑
春江水暖鸭先知
100年前的地摊
起个网名好难 发表于 2022-10-9 21:58
要不是这里的图片在外面不能用（很莫名其妙），就把这帖传到其它网站去试了。
这个是不能外链的，否则论坛负担太重的