亚伦影音工作室 发表于 2023-4-30 16:44

一键控制多个动图 想问情深有几许（DJ 默涵版）

<style>
#papa {
      margin: 20px-300px;
       place-items: center;
      width: 1164px;
      height: 620px;
      background: url('https://file.moyublog.com/d/file/2020-11-24/c14233be6de2e94e38772583eea21788.jpg') no-repeat center/cover; border-radius: 12px;display: grid;
      box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
      user-select: none;
      position: relative;
      z-index: 1;   
       overflow:hidden;
}


#ptpt{width: 90%;display: grid;
      mix-blend-mode: difference;   
      height: 90%;
left: -20%; top:0%;
position:absolute;
      z-index: 2;
      opacity: 1;
}

#ptpn{width: 200px;display: grid;
         height: 160px;
left: 30%; top:6%;
position:absolute;
      z-index: 3;
      opacity: 1;
}

#ptpm{width: 800px;display: grid;
         height: 450px; mix-blend-mode: difference;
left: 30%; top:10%;
position:absolute;
      z-index: 5;
      opacity: 1;
}

#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #ffffff;--btn_size: 30px;--track: #ffffff;--prog: #FF0000;}

#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}

@keyframes cover1{ from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 20%; top:10%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2em 华文行楷;color:#000078; z-index: 100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>

<div id="papa"><div id="ptpt"><img id="pp"src="https://pic2.imgdb.cn/item/644d89c40d2dde57773fc6de.gif" width="100%" height="100%"></div>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/64309c8c0d2dde577781ae06.gif" width="100%" height="100%"></div>
<div id="ptpm"><img id="pp1"src="https://pic2.imgdb.cn/item/644e280d0d2dde5777e017c7.gif" width="100%" height="100%"></div>


<div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music266538535.mp3" loop autoplay></audio>

<script >
(function() {
      (function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '✳',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
      (function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
      let averAdd = 0, offset = 0;
      let geci = `想问情深有几许（DJ 默涵版）
演唱：刘晓超
作词：杨学涛
作曲：音宝
编曲：福洲
混音：DJ 默涵
统筹：李艳萍
......
夜吹着冰凉凉的风
你消失在人海之中
我深深爱着你
却与你相拥似场梦
想问情深有几许我们的相遇
怎是悲伤结局
情深有几许人生的悲喜
都不由得自己
我无悔爱过你
无奈我这孤独命运
该怎么了断思念
诺言已变成了谎言
夜吹着冰凉凉的风
你消失在人海之中
我深深爱着你
却与你相拥似场梦
想问情深有几许我们的相遇
怎是悲伤结局
情深有几许人生的悲喜
都不由得自己
我无悔爱过你
无奈我这孤独命运
该怎么了断思念
诺言已变成了谎言`;
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;};
      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));}

      HCPlayer({
                lrcAr: getLrcAr(geci),
                lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); top:30%; ',
                player_css: '--ww: 120px;bottom: 0px;top:55px;left: 15%;',
                btn_txt: '✳',
      });

      FS({
                pa: papa,
               
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 90%; left: 20px;',
      });



      

      aud.onerror = () => {
                if(aud.error.code === 4) aud.src='http://antiserver.kuwo.cn/anti.s?rid=MUSIC_263613736&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3';
      }
})();
</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 = ''; image0.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("pp"),
image0 = document.getElementById("pp0"),
image1 = document.getElementById("pp1"),
button = document.getElementById("mplayer");

    if (image1 &&image0 &&image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.play();    image0.play(); image1.play();
            this.value = '.';
      } else {
            image.stop();   image0.stop();image1.stop();
            this.value = '';
      }
    };
}

</script>

小辣椒 发表于 2023-4-30 17:59

这个可以控制动图{:4_199:}

手机欣赏可能不准，歌词逃出几个字，晚上电脑欣赏，欣赏亚伦精彩制作

小辣椒 发表于 2023-4-30 18:00

亚伦的制作速度杠杠的{:4_178:}

小辣椒 发表于 2023-4-30 18:06

这个手机看唯一就是歌词溜出磁带了，其他都非常好，相信电脑一定效果更加好

醉美水芙蓉 发表于 2023-4-30 18:10

亚伦影音工作室 发表于 2023-4-30 18:12

小辣椒 发表于 2023-4-30 18:06
这个手机看唯一就是歌词溜出磁带了，其他都非常好，相信电脑一定效果更加好

电脑和手机确实不一样！

小辣椒 发表于 2023-4-30 18:13

亚伦影音工作室 发表于 2023-4-30 18:12
电脑和手机确实不一样！

是的，晚上回家电脑再欣赏{:4_187:}

梦缘 发表于 2023-4-30 20:47

好美的祝福帖，欣赏问好！

马黑黑 发表于 2023-4-30 21:00

精美制作，欣赏

焱鑫磊 发表于 2023-4-30 23:13

欣赏精彩！{:4_187:}

红影 发表于 2023-4-30 23:26

漂亮。欣赏亚伦老师好帖{:4_187:}

辫子哥哥 发表于 2023-5-1 13:22

{:4_208:}
祝节日快乐！
页: [1]
查看完整版本: 一键控制多个动图 想问情深有几许（DJ 默涵版）