论坛 › 音乐沙龙 › 擦肩而过(女声版) 祝福朋友们七夕快乐！

小辣椒 发表于 2024-8-9 20:48

擦肩而过(女声版) 祝福朋友们七夕快乐！

<style>
#papa{ margin: 150px 0 20px calc(50% - 530px);
        width: 900px;
        height: 715px;
        background:#000 url(https://xlaj.cn/assets/file/zp/20240808213211.gif)no-repeat center/cover;position: relative;overflow: hidden; border-radius: 24px; box-shadow:3px 3px 10px #ccc; }
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}

#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#t{position: absolute;top:180px; left:280px;width: 32px; height: 32px;z-index:4;mix-blend-mode:lighten;}

#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:71%; left:27.4%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #FFF;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #666;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 41px;
        border-width: 4px 4.5px;
        border-color: transparent transparent transparent #666;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 8px;
                left: 21.3px;
        border-width: 0 2px 0 2px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 10px sans-serif;
      color: #ccc;
         top:64.5%;
      left:28%;}

#prog {position: absolute;z-index: 91;
      width: 47%;
      height: 0.3%;
      cursor: pointer;
         top: 67%;
color: #cccccc;
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left: 27%;
border-radius: 2px;}


#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 28%; width: var(--w); overflow: hidden; color: #FFF; position: absolute; left:45%;top:80%;font-size: 18px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">擦肩而过(女声版)-陈晓竹</div>
<div id="t"><img id="tu" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src="https://xlaj.cn/assets/file/zp/20240808213211.gif " width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://disk.111t.net/filestores/2024/08/03/8b563fa452c093b7b593d14d2f13971d.mp3" loop autoplay></audio>

<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:12%; left:2%;z-index: 5;
    margin: 0 auto;}
.lrc #ullrc{
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: 30px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `擦肩而过(女声版)-陈晓竹   
爱上你是我的错
可是离开又舍不得
听着你 为我写的歌
好难过
如果说 我说如果
我们还能重新来过
不去计较 谁对谁错
你怎么做
我从来没想过
会有这样的结果
成为了彼此的过客
是爱的太少
还是要求的太多
总是会觉得不快乐
曾经就算是一个吻
我们也能从寂寞中挣脱
就算用泪水 换来笑容
也值得
而现在就算拥抱着
为何两颗心总不知所措
难道注定就这样
擦肩而过
当爱情来了谁又能说我
舍不得寂寞
当爱情走了谁又能说我
不觉得失落
当爱燃烧过谁又能说我
不觉得快乐
当爱变沉默谁又能说我
过的很洒脱
爱上你是我的错
可是离开又舍不得
听着你 为我写的歌
好难过
如果说我说如果
我们还能重新来过
不去计较 谁对谁错
你怎么做
当爱情来了谁又能说我
舍不得寂寞
当爱情走了谁又能说我
不觉得失落
当爱燃烧过谁又能说我
不觉得快乐
当爱变沉默谁又能说我
过的很洒脱
当爱情来了谁又能说我
舍不得寂寞
当爱情走了谁又能说我
不觉得失落
当爱燃烧过谁又能说我
不觉得快乐
当爱变沉默谁又能说我
过的很洒脱


`;
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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#ff0099, #ff0099, #ff0099 ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</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;
            // 透明度还原
            image.style.opacity = '';image1.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 image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>
<br><br><br><br>

小辣椒 发表于 2024-8-9 20:48

祝福天下有情人终成眷属{:4_204:}{:4_171:}{:4_177:}

小辣椒 发表于 2024-8-9 20:49

朋友们七夕快乐！

中国的情人节{:4_205:}

红影 发表于 2024-8-9 21:29

漂亮的大厅。欣赏亲爱的好帖，也祝你七夕节快乐{:4_187:}

红影 发表于 2024-8-9 21:29

借亲爱的好帖同祝大家七夕快乐{:4_177:}

走过岁月 发表于 2024-8-9 23:25

家庭影院，漂亮

走过岁月 发表于 2024-8-9 23:26

歌好听

走过岁月 发表于 2024-8-9 23:27

谢谢小辣椒的精彩

梦油 发表于 2024-8-10 08:28

有情人终成眷属
祝小辣椒和朋友们幸福快乐！

梦江南 发表于 2024-8-10 09:05

七夕节快乐!{:4_199:}

竹溪 发表于 2024-8-10 09:26

七夕快乐{:4_204:}

小辣椒 发表于 2024-8-10 13:22

红影 发表于 2024-8-9 21:29
漂亮的大厅。欣赏亲爱的好帖，也祝你七夕节快乐

亲爱的，七夕快乐！

其实我从来没有过这个节日的{:4_189:}

小辣椒 发表于 2024-8-10 13:30

红影 发表于 2024-8-9 21:29
借亲爱的好帖同祝大家七夕快乐

亲爱的，一起开心快乐！

小辣椒 发表于 2024-8-10 13:32

走过岁月 发表于 2024-8-9 23:25
家庭影院，漂亮

岁月好，这个都是以前标准的swf格式的播放器画面，现在偷懒就拿出来玩玩，这样就不用做图了{:4_170:}

小辣椒 发表于 2024-8-10 13:32

走过岁月 发表于 2024-8-9 23:26
歌好听
谢谢岁月欣赏{:4_187:}

小辣椒 发表于 2024-8-10 13:33

走过岁月 发表于 2024-8-9 23:27
谢谢小辣椒的精彩

哇塞，现在岁月咋这么客气了{:4_205:}

小辣椒 发表于 2024-8-10 13:34

梦油 发表于 2024-8-10 08:28
有情人终成眷属
祝小辣椒和朋友们幸福快乐！

谢谢梦油，小辣椒其实一直是最幸福，最快乐的人{:4_173:}

小辣椒 发表于 2024-8-10 13:35

梦江南 发表于 2024-8-10 09:05
七夕节快乐!

谢谢梦江南~~七夕快乐{:4_187:}

小辣椒 发表于 2024-8-10 13:35

竹溪 发表于 2024-8-10 09:26
七夕快乐

一起快乐！{:4_171:}

梦江南 发表于 2024-8-10 13:38

小辣椒 发表于 2024-8-10 13:34
谢谢梦油，小辣椒其实一直是最幸福，最快乐的人

是要做一直幸福快乐的人。{:4_187:}

查看完整版本: 擦肩而过(女声版) 祝福朋友们七夕快乐！