醉美水芙蓉 发表于 2023-9-27 22:47:30

你独爱我独宠

<style >
#papa{margin: 10px -150px ;
width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://www.yiyuen.com/e/file/view/638179') no-repeat center/cover;
position: relative;z-index: 12345;}

#benban{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:4;background:linear-gradient(0deg, #000000 2%,#000000 8%,rgba(2, 2, 2, 0) 30%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%);}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文楷体; opacity: 1; cursor: pointer; z-index: 111}
#dt{position: absolute;top:0%; left:0%;z-index: 2;
        width:100%;
        height:100%; transition: .3s all ease;}
#dt1{position: absolute;top:10%; left:0%;z-index: 2;
        width:80%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        height:80%; }

#mplayer {top:65%; left:5%;z-index: 3;
position: absolute;
font: normal 7em/0em serif;
color:#ffffff;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
#audio{top:90%; left:0%;z-index: 6;
position: absolute;
width:100%;
cursor: pointer;
mix-blend-mode: lighten;filter:invert(100%)
}
#flyBox { --w: 90%; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:3%;top:88%;font-size: 14px; z-index: 36;}
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 60s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}

</style>
<div id='papa'>
<span id="fullscreen">全屏观赏</span>
<div id='benban' ></div>

<div id='dt'><img id="testImg" src="https://www.yiyuen.com/e/file/view/638186" width="100%" height="100%"></div>
<div id='dt1'><img id="testImg1" src="https://www.yiyuen.com/e/file/view/637950" width="100%" height="100%"></div>
<div id="lrc" data-lrc=" "> </div>
<div id="mplayer"></div>
<div id='audio'>
<audio id="aud" src="https://www.qqmc.com/mp3/music288319124.mp3"style="width:100%;"autoplay="autoplay" controls="controls" height="100%" loop="loop"></audio></div>
   <div id="flyBox"><div>祝福祖国繁荣昌盛 祝福论坛的朋友们合家快乐！</div></div>
</div>


<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("testImg");
var image1 = document.getElementById("testImg1");
varbutton = document.getElementById("mplayer");
let mState = () => aud.paused ? (image.stop(),image1.stop()): (image.play(),image1.play());
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };

</script>
<style>
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;
        left: 50%;z-index: 20;
        transform: translate(-50%);
        top: 70%;
        font:normal 3em 华文隶书;
        color: #0000;
        white-space: pre;
       
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1{ 0% { width: 0%;letter-spacing: 15px; color:#000090;}100% { width: 350%; letter-spacing: 0px;color:#ff0000; }   }
@keyframes cover2 {0% { width: 0%;letter-spacing: 0px; color:#00ff00;}100% { width: 350%; letter-spacing: 15px;color:#ff0000; }}

</style>


<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
你独爱我独宠 (烟嗓男版) - 王超然
词：师立宅
曲：森林
编曲：关剑
和声：姚斯婷
混音：苏洲
制作人：余云飞/刘兴靖
出品发行：东昇音乐
LRC编辑：醉美水芙蓉
和你相遇在人海
心跳突然在加快
发现对你有了依赖
幸福的未来
同你看日落花开
把年华涂满色彩
站在雨里也别发呆
因为有我在
你独爱我独宠
世间万物都感动
眼中风景皆是你
无人可替代
你独爱我独宠
牵手天涯一路行
时光如风催人老
你是我不变的梦
和你相遇在人海
心跳突然在加快
发现对你有了依赖
幸福的未来
同你看日落花开
把年华涂满色彩
站在雨里也别发呆
因为有我在
你独爱我独宠
世间万物都感动
眼中风景皆是你
无人可替代
你独爱我独宠
牵手天涯一路行
时光如风催人老
你是我不变的梦
你独爱我独宠
世间万物都感动
眼中风景皆是你
无人可替代
你独爱我独宠
牵手天涯一路行
时光如风催人老
你是我不变的梦
谢谢欣赏！`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

</script>
</td></tr></table>

活跃概况 发表于 2023-11-10 22:28:16

这个作品漂亮！！！！

醉美水芙蓉 发表于 2023-11-11 14:05:24

活跃概况 发表于 2023-11-10 22:28
这个作品漂亮！！！！

谢谢朋友光临！
页: [1]
查看完整版本: 你独爱我独宠