全屏展示代码
本帖最后由 亚伦影音工作室 于 2025-3-14 16:37 编辑 <br /><br /><style>#papa {margin: 10px -300px;width: 1164px;height: 620px;background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg')no-repeat center/cover;position: relative;z-index: 1;overflow: hidden;}
#tu{position: absolute;top:0%; left:0%;
width: 100%;background:url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') no-repeat center/cover;
height: 100%;animation: round 4s linear infinite; height: 100%;}
.stop #tu{animation-play-state: paused;}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#zs{position: absolute;top:10%; left:82%;width: 125px;height: 80px;font:80 2em/0em 华文行楷;color: #fff;cursor:pointer;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)}
#全屏{position: absolute;}
#退出{ position: absolute;opacity:0;}
.lyricDisp{transition:.3s all ease;text-align:center;color:#ffffff;line-height: 50px;}
.lyricDisp:first-child{font-size:1.5em;color:#fff080;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;text-align:center;line-height: 50px;}
.lyricDisp:first-child::before{position:absolute;content:attr(data-lrc);width:20%;height:100%;color:#FF0000;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);text-align:left;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)}
@keyframes bgMove1{from{width:0%;}to{width:100%;}}@keyframes bgMove0{from{width:0%}to{width:100%;}}
.LRCShow{position:absolute;left:0%;top: 25%;width:50%;font-weight:990;font-size:1.8em;font-family:仿宋;cursor:pointer;}
</style>
<script type="text/javascript">
var lrcPlayerM=function(){return this.init.apply(this,arguments)};lrcPlayerM.prototype={constructor:lrcPlayerM,init:function(opts){this.showLrcObj=document.querySelector('.LRCShow');this.gclines=new Array();this.slines=typeof opts.showLines==='number'?opts.showLines:1;for(k=0;k<this.slines;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';if(this.slines==1&&k==1)this.gclines.style.textAlign='center';this.showLrcObj.appendChild(this.gclines)}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.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){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)}for(n=1;n<that.slines;n++){if(that.idx+n>=that.lrcVec.length){that.gclines.innerHTML="\u3000"}else{that.gclines.innerHTML=that.lrcVec}}that.idx++}});this.showLrcObj.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
</script>
<divid="papa" >
<div id='Img' ><div id='tu'></div></div>
<div id="bnt"><div class="LRCShow"></div></div>
<divid="zs"onclick="btnClick()"title="全屏展示/退出全屏" ><div id="全屏">全屏展示</div><div id="退出" >退出全屏</div>
</div>
<script type="text/javascript">
let lrctxt = `
为你祈祷(DJ 默涵版)-魏新雨
词：崔伟立
曲：崔伟立
宣发：张丹娴| 廖文婷
统筹：唐欣宇
出品人：胡伟
OP：深圳启韵文化传媒有限公司
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠`;
var opts = {
lrcDoc:lrctxt, // 存放lrc歌词的变量名
audioURL:"https://s2.ananas.chaoxing.com/sv-w7/audio/17/a4/2f/da1aa41f467563df8304f74152c55a4f/audio.mp3", // 歌曲链接
showLines:7 // 显示行数，可选，默认为1行
};
new lrcPlayerM(opts);
</script>
<script>
var image = document.getElementById("Img"),
button = document.getElementById("bnt");
bnt.onclick = function() {
if (this.value == '1') {
image.classList.remove('stop');
this.value = '0';
} else {
image.classList.add('stop');
this.value = '1';
}
};
function btnClick() {
var zs= document.getElementById("zs");
if (this.isFullscreen()) {
全屏.style.opacity= '1'; 退出.style.opacity = '0';
zs.style.cursor="ne-resize";
exitFullScreen();
} else {
全屏.style.opacity= '0'; 退出.style.opacity = '1';
zs.style.cursor="se-resize";
zs.style.visibility='visible';
if (zs.requestFullscreen) {
papa.requestFullscreen();
} else if (zs.webkitRequestFullScreen) {
zs.webkitRequestFullScreen();
} else if (zs.mozRequestFullScreen) {
papa.mozRequestFullScreen();
} else if ( zs.msRequestFullscreen) {
zs.msRequestFullscreen();
}
}
}
// 退出全屏
function exitFullScreen() {
let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
if (exitFullScreen) {
exitFullScreen.call(document);
}
}
// 判断是否全屏
function isFullscreen() {
return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
}
</script> 制作很漂亮，欣赏亚伦老师好帖{:4_199:} 这个全屏方式不是很方便呢，鼠标附上去，能看到全屏的提示，会让人想去点文字提示，实际是点不到的。
当鼠标变手型，点击会暂停，同时也全屏了。感觉不是很方便呢{:4_204:} 欣赏了{:4_199:} 好听好看 感谢分享 欣赏精彩，问候亚伦。 这个代码不错，点赞！
页:
[1]