liumang 发表于 2023-12-4 19:55

郑源 - 我不后悔 (DJ版)

<style>
#papa {margin: 10px -160px;
        width: 1164px;
        height: 640px;
        background:#000000 url()no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}
#bt{ color: #000000; position: absolute; left:3%;top:5%;font-size: 30px; font-family:华文隶书;z-index: 11; animation: wz 20s linear infinite ; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);cursor: pointer;}
.stop #bt{animation-play-state: paused;}
@keyframes wz {
50% {opacity: 1; left: 60%;}
}
#dtp{position: absolute;top:0%; left:0%;width: 100%;height:100%; z-index:3;}

#jzg {position: absolute;
      top:67%; left:5%;z-index: 120;
      width: 160px;filter:hue-rotate(20deg);
      height:160px;
   }
#wudao {position: absolute;
      top:5%; left:10%;z-index: 3;
      width: 1000px;
      height:500px;
   }

#jita {position: absolute;
      top:93%; left:0%;z-index: 3;
      width: 100%;
      height:10px;
   }
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:96%; left:calc(95% - 15px);font: normal 1.2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<style>

#klok{
-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color:#880000;
background-image:linear-gradient(50deg, #ff0000 40%, #00ff80 50%, #fff000 10%, #000078 60%);
   background-repeat:no-repeat;
line-height:35px;
    -webkit-animation:loop 0.56slinearinfinite ;}
@-webkit-keyframes loop{
   50%{background-position: -2200px 0;filter:hue-rotate(360deg)contrast(120%)brightness(350%);}
}
</style>
<div id="papa">
<span id="fullscreen">全屏</span>
<div id="Img"><div id="bt">郑源 - 我不后悔 (DJ版)</div></div>
<div id="dtp"><img id="tu" src="https://xlaj.cn/assets/file/zp/20231024214007.gif" width="100%" height="100%"></div>
<div id="wudao"><img id="wd" src="https://pic.imgdb.cn/item/656d799ac458853aef127cd8.gif" width="100%" height="100%">
</div>
<div id="jita"><img id="jt" src="https://pic.imgdb.cn/item/6455fdf60d2dde5777aa7b3c.gif" width="100%" height="100%">
</div>
<divclass="lrc" >
      <div id="klok"><ul id="ullrc">
       </ul> </div>
            </div>
<div id="jzg"><img id="an" src="https://mp3.wf/static/image/smiley/xiaobaitu/39.gif" width="100%" height="100%">
<audio id="aud" src="https://mp3.wf/uploap/file/20231202130357.mp3" loop autoplay></audio>
</di>
<script>
(function(){
var image = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
/*控制 文字颜色*/
klok.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => klok.style.animationPlayState = 'running');
aud.addEventListener('pause', () => klok.style.animationPlayState = 'paused');
/*结束*/
</script>
<style type="text/css">
.lrc{z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:81%; left:0%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{cursor: pointer;
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
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;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `郑源 - 我不后悔 (DJ版)
作词：许常德
作曲：陈国华
套用亚伦音乐的代码
用了小辣椒的动图
一并致谢
说好了不回头不想承诺
缘分尽了你别过头
如果还有什么值得我逗留
我想是你爱过我
只是路无尽头
都是路过什么感受我能带走
眼泪可以不流
心碎不能救
看我能否得自由
当我松开你的手
一些风沙哽住眼眸
爱你最后一幕却模糊带过
不让疼痛有路追究
我不后悔我曾爱过
只是天涯从此寂寞
远去的渡口彼岸的灯火
人在河流只需漂泊
我不后悔被你爱过
只是不能爱到最后
短暂的幸福
拥有就足够
只要舍得就会快乐会快乐

当我松开你的手
一些风沙哽住眼眸
爱你最后一幕却模糊带过
不让疼痛有路追究
我不后悔我曾爱过
只是天涯从此寂寞
远去的渡口彼岸的灯火
人在河流只需漂泊
我不后悔被你爱过
只是不能爱到最后
短暂的幸福
拥有就足够
只要舍得就会快乐会快乐


`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
jzg.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/

</script>
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image0.style.opacity = '';image1.style.opacity = '';;image2.style.opacity = '';image3.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image0= document.getElementById("tu");
var image1= document.getElementById("an");
var image2= document.getElementById("wd");
var image3= document.getElementById("jt");
jzg.onclick =function() { aud.paused ? (image0.stop(),image1.stop(),image2.stop(),image3.stop()):(image0.play(),image1.play(),image2.play(),image3.play())};
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>

liumang 发表于 2023-12-4 19:56

套用亚伦音乐的代码

用了小辣椒的动图

一并致谢
{:5_124:}

liumang 发表于 2023-12-4 19:57

@bgmnet

同一首{:5_142:}

亚伦影音工作室 发表于 2023-12-4 19:59

很不错，但控制按钮不七作用！

liumang 发表于 2023-12-4 20:02

亚伦影音工作室 发表于 2023-12-4 19:59
很不错，但控制按钮不七作用！

对的 这个是什么原因？

liumang 发表于 2023-12-4 20:03

套用代码还有啥诀窍？

bgmnet 发表于 2023-12-4 21:25

点带耳机的那个卡通头像可以暂停可以播放

liumang 发表于 2023-12-4 22:22

bgmnet 发表于 2023-12-4 21:25
点带耳机的那个卡通头像可以暂停可以播放

是的，我套用亚伦音乐的代码，发现他可以一键停止。我的不行。算了不去纠结了
页: [1]
查看完整版本: 郑源 - 我不后悔 (DJ版)