再次请教马黑黑老师

老谟深虑 发表于 2023-11-27 14:39

本帖最后由老谟深虑于 2023-11-27 14:41 编辑

   马黑黑老师你好，我在《离退休论坛》发表代码音画，发现一个问题，向老师请教：我在那里发代码音画，无法向左边移动，只能定到-20。如下图：
   https://z1.ax1x.com/2023/11/27/piBk8bQ.jpg

      如果我想向左移动定到-220，这时画面是这样。如下图：
   https://z1.ax1x.com/2023/11/27/piBk3Dg.jpg

      画面好像是从页面下面过去了。这是《离退休论坛》网站有意设计的吗？请教老师这个现象我们能不能在音画代码上破解，叫画面在外面。请老师在你有空的时候，帮我琢磨琢磨。麻烦你了，谢谢！

亚伦影音工作室 发表于 2023-11-27 15:03

代码有误！

红影发表于 2023-11-27 15:26

对呀，是不是要把代码发来看看，光有图说明不了问题啊。

世外桃源 发表于 2023-11-27 16:04

不懂，飘过~

老谟深虑 发表于 2023-11-27 16:32

老谟深虑 发表于 2023-11-27 16:34

这是我套用焱鑫磊老师的代码。

老谟深虑 发表于 2023-11-27 16:41

亚伦影音工作室发表于 2023-11-27 15:03
代码有误！

谢谢亚伦老师，我把代码发了，请你看看。我是套用老师们的代码。

老谟深虑 发表于 2023-11-27 16:42

红影发表于 2023-11-27 15:26
对呀，是不是要把代码发来看看，光有图说明不了问题啊。

代码已在帖子里发了。

老谟深虑 发表于 2023-11-27 16:43

本帖最后由老谟深虑于 2023-11-27 16:47 编辑 <br /><br /><style>
#papa { margin: 100px -220px; width: 1200px; height: 750px; background: gray url('https://pic.imgdb.cn/item/64f29845661c6c8e54a06877.jpg') center/cover no-repeat; box-shadow:0 0px 0px 0px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}

#vid { position: absolute; width: 100%; height: 100%; top: -30px; object-fit: cover; opacity: 1;auto;filter:contrast(120%);transform: scale(1.1, 1.1) }

#photo img {
   width: 100%;
   height: 100%;
   position: absolute;
   border: 0px solid #000000;
   top: 0px;
   left: 0px;
   filter: contrast(150%)brightness(100%);
   -webkit-mask-image:radial-gra**nt(black 30%,transparent 70%);
   opacity: 0;
   animation-name: round;
   animation-duration: 48s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}
@keyframes round {
0% { opacity: 0; transform:translate(0%,0%)scale(0);}
5% { opacity: 1; transform:translate(0%,0%)scale(0);}
14% { opacity: 1; transform:translate(0%,0%)scale(1);}
16% { opacity: 1; transform:translate(0%,0%)scale(1);}
24% { opacity: 0; transform:translate(100%,0%)scale(1);}
}
#photo img:nth-child(8) { animation-delay: 42s; }
#photo img:nth-child(7) { animation-delay: 36s; }
#photo img:nth-child(6) { animation-delay: 30s; }
#photo img:nth-child(5) { animation-delay: 24s; }
#photo img:nth-child(4) { animation-delay: 18s; }
#photo img:nth-child(3) { animation-delay: 12s; }
#photo img:nth-child(2) { animation-delay: 6s; }
#photo img:nth-child(1) { animation-delay: 0s; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 45%;top:85%; transform: translate(-50%, 10px);font:normal 2.8em 华文隶书; color:#0000;filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; width: 300px; height: 300px;left: -5%; z-index: 120;top:60%; mix-blend-mode:exclusion; transform:perspective(0px) rotateY(0deg)rotateX(0deg)scale(1.0); }
#an{position: absolute; top:0%; left:0%; width: 100%; height:100%; z-index: 120; }
@keyframes cover1{ 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}

#fullscreen { position: absolute; top:5%; left:85%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.0em 华文隶书; opacity: 1; cursor: pointer; z-index: 1660}
</style>

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

<video id="vid" src="https://i.mp3.wf/view.php/cdf48d76d9e11e2728aee888cd307c58.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>

<divid="photo">
<img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0Pomd.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PfSO.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PhlD.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P46e.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P5OH.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PT0A.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P7TI.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0Pbkt.jpg" />
</div>

<div id="mydiv"></div>
<divid="img_border" ></div>
<div id="lrc" data-lrc="焱鑫磊"></div>
<div id="mplayer">

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p>                         <img alt="" src="https://pic.imgdb.cn/item/647b1e12f024cca1730e8c3f.png" style="width: 100px; height: 100px;" /></p>

<p> </p>

</div>
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/11/24/5e51839ab8a9536b823cb62cb524e2ad.mp3" autoplay loop></audio>

<script>
(function() {
   let mKey = 0, mFlag = true;
   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 averAdd = 0, offset = 0;
   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 geci = `咏梅 - 李胜素&王泓翔
作词：（现代）毛泽东
作曲：孙玄龄
LRC：老谟深虑
风雨送春归
飞雪迎春到
已是悬崖百丈冰
犹有花枝俏
犹有花枝俏
俏也不争春
只把春来报
待到山花烂漫时
她在丛中笑
待到山花烂漫时
她在丛中笑
风雨送春归
飞雪迎春到
已是悬崖百丈冰
犹有花枝俏
犹有花枝俏
俏也不争春
只把春来报
待到山花烂漫时
她在丛中笑
俏也不争春
只把春来报
待到山花烂漫时
她在丛中笑
待到山花烂漫时
她在丛中
笑
`;
   let lrcAr = getLrcAr(geci);
   let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
   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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('pause', () => mState());
   aud.addEventListener('play', () => mState());
   aud.addEventListener('seeked', () => calcKey());
   aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
   mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
            fs = !fs;
   };
</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 = '';
   }
   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("an"),
button = document.getElementById("mplayer");
if (image && button) {
button.onclick = function() {
   if (this.value == '') {
      image.play();
         this.value = '.';
   } else {
         image.stop();
         this.value = '';
   }
};
}

</script>

亚伦影音工作室 发表于 2023-11-27 18:20

<divid="photo">
<img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0Pomd.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PfSO.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PhlD.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P46e.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P5OH.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0PT0A.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0P7TI.jpg" /> <img class="photo" src="https://z1.ax1x.com/2023/11/25/pi0Pbkt.jpg" />

这里面有错

红影发表于 2023-11-27 19:14

老谟深虑发表于 2023-11-27 16:42
代码已在帖子里发了。

看楼下的貌似可以移位啊。

老谟深虑 发表于 2023-11-28 09:04

亚伦影音工作室发表于 2023-11-27 18:20
这里面有错

请问亚伦老师，这里的错在哪里，请老师指教，谢谢！

老谟深虑 发表于 2023-11-28 09:10

红影发表于 2023-11-27 19:14
看楼下的貌似可以移位啊。

在咱这里可以移位，在《离退休论坛》就不能移位，不知为什么？

红影发表于 2023-11-28 11:52

老谟深虑发表于 2023-11-28 09:10
在咱这里可以移位，在《离退休论坛》就不能移位，不知为什么？

这个代码我也不熟，不好意思啊{:4_204:}

页: [1]

花潮论坛's Archiver

再次请教马黑黑老师