红枫 发表于 2022-8-17 21:41
JS文件己上传至论坛上了，只是改后缀名为.txt才能上传的。用在html文件里时，只耍将.JS 改为.txt即可。
...
红枫老师，早上好！非常感谢您的指教！我原真的不懂得还可以用.txt文件链接，经你一说，看了<script type="text/javascript">，确实是可以是txtt类型的。
<link rel="stylesheet" href=https://unpkg.com/animate.css@3.5.2/animate.min.css />
<!-- 图片切换的样式 -->
<style type="text/css">
.tab {position:relative;width:1000px; height:563px; margin:30px; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 6px 15px #ff0000; overflow:hidden; transform:rotate(0deg); background:url(https://z3.ax1x.com/2021/08/26/hujGMd.gif)85% 5% no-repeat,url(https://s1.ax1x.com/2022/08/16/v0uQKO.jpg)0 0/100% 100%; }
.dh{width: 1000px;height: 563px; filter: brightness(110%); filter: saturate(120%); animation-Name: rotateIn; }
</style>
<!-- LRC歌词的样式-->
<style type="text/css">
#outframe {width:100%; height:150px; position:relative; top:-170px; left:20px;}
.lrcShow{width:100%;height:150px;overflow:hidden;position:absolute;bottom:0px;left:0px; animation:slider 0.26s linear infinite; }
@keyframes slider{
from{filter:hue-rotate(360deg) contrast(180%) brightness(200%);}
to{filter:hue-rotate(0deg) contrast(140%) brightness(100%);}}
.lrcShow ul{width:100%;padding-top:50px;list-style:none;transition:0.3s all ease;margin:0px;}
.lrcShow ul li{filter:drop-shadow(1px 0 0 #ffffff ) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff); height:70px; line-height:70px; font-family:楷体; font-size:0px; color:#000078; font-weight:normal; transition:.3s all ease; list-style-type:none; text-align:center; display:block; width:100%; margin:0 auto;}
.lrcShow ul li.active{font-family:楷体; font-size:70px; font-weight:bold; color:#ff0000;}
.twinkle{animation:twinkleDef 3s linear infinite;}
@keyframes twinkleDef{
0%,100%{filter:hue-rotate(360deg) drop-shadow(0px 0px 2px #333) drop-shadow(0px 0px 4px #333) drop-shadow(0px 0px 8px #333) drop-shadow(0px 0px 16px #333);}
50%{filter:hue-rotate(0deg) drop-shadow(0px 0px 16px #ccc) drop-shadow(0px 0px 8px #ccc) drop-shadow(0px 0px 4px #ccc) drop-shadow(0px 0px 2px #ccc);}}
</style>
<div style="position:relative;width:1000px; height:700px; top:0px;left:-30px;" >
<div class="tab" >
<img class="dh animated" src="https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91251.jpg" id="img1" />
</div>
<div id="outframe">
<div class="lrcShow twinkle" id='sLRC'></div>
<div id="mDisk"></div>
</div>
</div>
<!-- 以下是图片切换的JS代码-->
<script type="text/javascript">
var imgs=["https://pic.imgdb.cn/item/62ef8a1216f2c2beb1a953e7.jpg", "https://pic.imgdb.cn/item/62ef8a1216f2c2beb1a953e7.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a9126f.jpg", "https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a9126f.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91261.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91261.jpg","https://pic.imgdb.cn/item/62ef805816f2c2beb18441a5.jpg","https://pic.imgdb.cn/item/62ef805816f2c2beb18441a5.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91251.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91251.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a74659.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a74659.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91240.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a91240.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a9126a.jpg","https://pic.imgdb.cn/item/62ef89ff16f2c2beb1a9126a.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f44.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f44.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f3c.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f3c.jpg","https://s1.ax1x.com/2022/08/16/v0fvwV.jpg","https://s1.ax1x.com/2022/08/16/v0fvwV.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f28.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f28.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f03.jpg","https://pic.imgdb.cn/item/62ef89c216f2c2beb1a82f03.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a746b1.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a746b1.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a746ac.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a746ac.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a746a0.jpg","https://pic.imgdb.cn/item/62ef898416f2c2beb1a746a0.jpg","https://s1.ax1x.com/2022/08/16/v0TPqs.jpg" ,"https://s1.ax1x.com/2022/08/16/v0TPqs.jpg","https://s1.ax1x.com/2022/08/16/v0bql8.jpg","https://s1.ax1x.com/2022/08/16/v0bql8.jpg","https://s1.ax1x.com/2022/08/16/v07dpT.jpg","https://s1.ax1x.com/2022/08/16/v07dpT.jpg"];
var dhlm= ["flip","zoomOut ", "zoomIn"," zoomOutLeft ", "flipInX"," zoomOutRight ", "flipInY"," zoomOutUp ", "fadeInLeft"," rollOut ", "fadeInRight"," rotateOutUpRight ", "fadeInDownBig"," rotateOutUpLeft ", "rotateIn"," rotateOutDownRight ", "wobble"," rotateOutDownLeft ", "fadeInLeftBig"," rotateOut ", "zoomInDown", " fadeOutRight", "fadeInRightBig"," fadeOutUpBig", "fadeInUpBig","fadeOutLeftBig ", "fadeInDown"," fadeOutLeft ", "fadeInUp", " flipOutX ", "pulse", "zoomOutDown", "rotateInDownLeft", "fadeOutDownBig", "rotateInDownRight", "fadeOutDown", "rotateInUpLeft","fadeOut"];
var i=0;
var j=0;
function qiehuan(){
document.getElementById("img1").src=imgs;
img1.style.animationName=dhlm;
i++;
j++;
if(i >37){
i=0;
j =0;
}
}
setInterval("qiehuan()",3700);
</script>
<!--以下两个都是LRC歌词的JS代码-->
<script type="text/javascript">
var hasClass = function(elements, cName) {
return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)"))
};
var addClass = function(elements, cName) {
if (!hasClass(elements, cName)) {
elements.className += " " + cName
}
};
var removeClass = function(elements, cName) {
if (hasClass(elements, cName)) {
elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " ")
}
};
var lrcPlayerX = function() {
return this.init.apply(this, arguments)
};
lrcPlayerX.prototype = {
constructor: lrcPlayerX,
init: function(opts) {
lyricTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
this.showLrcObj = document.getElementById(opts.lrcShowID);
this.audioCtrl = document.getElementById(opts.audioCtrl);
this.lrcVec = this.handleLrc(lyricTxt);
this.showLrcObj.appendChild(this.formLRCShow());
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,
})
}
lrcs.push({
seconds: _0,
words: lrcTxt
})
}
}
}
return lrcs.sort(function(a, b) {
return (a.seconds - b.seconds)
})
},
formLRCShow: function() {
var ulObj = document.createElement('ul');
for (let index = 0; index < this.lrcVec.length; index++) {
var liObj = document.createElement("li");
liObj.innerText = this.lrcVec.words;
ulObj.appendChild(liObj)
}
return ulObj
},
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);
var that = this;
var turn = 0;
this.idx = 0;
this.mObj.addEventListener('ended', function() {
that.idx = 0;
removeClass(that.audioCtrl, 'z360z');
this.play()
});
this.mObj.addEventListener('playing', function() {
addClass(that.audioCtrl, 'z360z')
});
this.mObj.addEventListener('pause', function() {
removeClass(that.audioCtrl, 'z360z')
});
this.mObj.addEventListener('error', function() {
console.log("audio wrong, remove play start event");
that.showLrcObj.style.display = 'none';
var lrc_li_height = 70,
lrc_ul_height = 50;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0
}
that.showLrcObj.removeChild(this)
});
this.mObj.addEventListener('timeupdate', function() {
if (that.idx < that.lrcVec.length) {
if (this.currentTime > that.lrcVec.seconds) {
var lrc_li_height = 70,
lrc_ul_height = 50;
var top = that.idx * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0
}
var ullrc = that.showLrcObj.getElementsByTagName('ul');
ullrc.style.marginTop = -top + "px";
var activeLi = ullrc.querySelector(".active");
if (activeLi) {
activeLi.classList.remove("active")
}
ullrc.children.classList.add("active");
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">
var lrc = `
请您欣赏《来生愿做一朵莲》
演唱：魏新雨
作词：静儿
作曲：崔伟立
ＬＲＣ歌词：寒冬残荷
来生愿做一朵莲
静静盛开在佛前
出淤泥不染
倚清风而眠
花开不语
花落无言
来生愿做一朵莲
与你再续三生缘
不早也不晚
来到你身边
不再错过
不再擦肩
来生愿做一朵莲
或在佛前
或在你心田
一生风清云淡
不纠也不缠
迎风舒展
浅笑嫣然
来生愿做一朵莲
苦辣酸甜
喜乐悲欢
等到回头是岸
心不再凌乱
随遇而安
宁静致远
来生愿做一朵莲
静静盛开在佛前
出淤泥不染
倚清风而眠
花开不语
花落无言
来生愿做一朵莲
与你再续三生缘
不早也不晚
来到你身边
不再错过
不再擦肩
来生愿做一朵莲
或在佛前
或在你心田
一生风清云淡
不纠也不缠
迎风舒展
浅笑嫣然
来生愿做一朵莲
苦辣酸甜
喜乐悲欢
等到回头是岸
心不再凌乱
随遇而安
宁静致远
来生愿做一朵莲
或在佛前
或在你心田
一生风清云淡
不纠也不缠
迎风舒展
浅笑嫣然
来生愿做一朵莲
苦辣酸甜
喜乐悲欢
等到回头是岸
心不再凌乱
随遇而安
宁静致远
等到回头是岸
心不再凌乱
随遇而安
宁静致远
谢谢！
`;
var opts = {
lrcTxt:lrc,
lrcShowID:'sLRC',
audioCtrl:'mDisk',
audioURL:'http://url.amp3a.com/kuwo.php/7183671.mp3'
};
new lrcPlayerX(opts);
</script>
<img>标签怎么可以发大图片的了？太好了？