请教夕阳老师：如何控制这个动图、添加这个视频？[已解决]

杨帆发表于 2024-12-1 12:54

本帖最后由杨帆于 2024-12-10 23:16 编辑 <br /><br /><div style="position:absolute;z-index:32768;background:none;width:100%;left:80px;margin-top:50px;"><center><IFRAME src="https://file.uhsea.com/2412/de21e7ba990849ef5c9de7989eb716f4OK.html" width="1600" height="1000" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no" allow="fullscreen"></IFRAME></center></div><div style="height:1000px"></div><BR><BR><BR><BR><BR><BR><BR><BR><BR>

杨帆发表于 2024-12-1 13:05

@夕阳黄昏夕阳老师您好：

在本地预览，除了动图控制不了，其余正常

不知为何发到论坛就全部失效了

请给于指导！由衷感谢~

杨帆发表于 2024-12-1 13:07

还有，歌词预览在左下，咋发在论坛就跑到了左上呢？

夕阳黄昏 发表于 2024-12-1 13:43

杨帆发表于 2024-12-1 13:05
@夕阳黄昏夕阳老师您好：

在本地预览，除了动图控制不了，其余正常

此帖正常显示需要三部分代码： CSS、HTML 以及 js
而在此帖中没有 js 代码所以所有动态全部失效，CSS代码部分混入了多余的代码导致歌词跑到上面去了。

我估计发帖时没把本地代码全部拷上故缺失了全部的js代码。

另外，发帖步骤可能也存在问题。

杨帆发表于 2024-12-1 14:18

夕阳黄昏发表于 2024-12-1 13:43
此帖正常显示需要三部分代码： CSS、HTML 以及 js
而在此帖中没有 js 代码所以所有动态全部失效，CSS代 ...

知道了，我再试试，谢谢夕阳老师{:4_191:}

杨帆发表于 2024-12-1 14:46

还有一个问题请教：

为何在本地测试，用之前的办法也不能控制动态图呢？

该如何控制呢？谢谢夕阳老师@夕阳黄昏

夕阳黄昏 发表于 2024-12-1 16:27

杨帆发表于 2024-12-1 14:18
知道了，我再试试，谢谢夕阳老师

4#代码第二行 @import url(https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css);
应该是发帖时被破坏了，正确的是 @import rl(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
改正后大部分功能会正常。
这帖子的代码相对有些复杂，搞清楚各部分的作用还需要理顺它们之间的相互关系才能全部正常，这功夫大概和重新做一遍差不多。

杨帆发表于 2024-12-1 17:12

夕阳黄昏发表于 2024-12-1 16:27
4#代码第二行 @import url(https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css);
应该是发帖时 ...

好的，知道了，谢谢老师{:5_114:}

夕阳黄昏 发表于 2024-12-1 18:22

没仔细琢磨，凑合着调整了一下
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
   /** 不满意一般设置也可以调整下 **/

#papa {
position: relative;
width: 1400px;
height:750px;
background-color: #000000 ;
overflow:hidden;
margin: 130px 0 30px calc(50% - 780px);
box-shadow: 4px 4px 10px #000;
}

#testImg{position: absolute;width:80%;height: 90%;z-index: 4;mix-blend-mode:darken; }

.lrcShow {
font:normal 3em 华文新魏;
font-weight:200;
color: #000080;
white-space: pre;
-webkit-background-clip: text;
z-index: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);

}
.lrcShow::before { position: absolute;width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre-webkit-background-clip: text;

}

zxx-slide {
width: 100%;
height: 100%;
position: absolute;
}
.zxx-slide-a {
position: absolute;
cursor: default;
pointer-events:none;
}
.zxx-slide-a.in {
z-index: 1;
animation-duration: 2s;
animation-name: tilt-in-fwd-tr;
transition: 1s;
}
.zxx-slide-img {
width: 100%;
height: 100%;
}
/**
* ----------------------------------------
* animation tilt-in-fwd-tr
* ----------------------------------------
*/
@keyframes tilt-in-fwd-tr {
0% {transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
opacity: 0;
}
100% {transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
#processMeter{
position: absolute; right:1%; bottom:6%; width: 200px; height:100px; z-index:5;}
#mPlayer{transform-origin:50%;cursor: pointer;animation: rot 5s linear infinite var(--rState);}
@keyframes rot {to {transform:rotate(1turn)}}

#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}

</style>
<div id="papa">
<img id="testImg" src="https://xlaj.cn/upfile/202411/27/fn.gif" style="top:30px; left:200px;" />

<zxx-slide>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660941589f345e8d038131b5.jpg"> </a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52abd.jpg"></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52e06.jpg"></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660946239f345e8d03a6afeb.jpg"></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ee9f345e8d03a535bb.jpg."></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ee9f345e8d03a531e6.jpg"></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660946229f345e8d03a6accb.jpg"></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/66095b059f345e8d03546b8e.jpg"></a>
<a class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/660945ed9f345e8d03a52e06.jpg"></a>
</zxx-slide>
<div id="processMeter">
   <svg stroke-width="5" viewBox="0 0 200 100" id="svgObj">
         <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"fill="none" ></path>
         <path
         class="process-circle"
         d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
         stroke="darkred"
         fill="none"
         stroke-dasharray="455"
         stroke-dashoffset="455"
         ></path>
         <defs>
            <clipPath id="clip">
               <circle cx="100" cy="50" r="41" />
            </clilpPath>
         </defs>
         <image xlink:href="https://pic.imgdb.cn/item/6723214fd29ded1a8cfe28f1.png" id="mPlayer" width="95" height='95' x="50" y="0" clip-path="url(#clip)" preserveAspectRatio="none" />
         <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
         <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
   </svg>
</div>
<div class="lrcShow" data-lrc="牧羊曲" >牧羊曲</div>

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

</div>
<script>
const processCircle = document.querySelector('.process-circle');
// 获取圆的周长
const circumference = processCircle.getTotalLength();
// 把周长赋值给 strokeDasharray
processCircle.style.strokeDasharray = circumference;

function setProcessCircle(percent = 0) {
   // 动态计算 offset 赋值给 strokeDashoffset
   // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
   processCircle.style.strokeDashoffset =
      circumference * (1 - parseInt(percent) / 100)
}
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
let lrctxt = `

牧羊曲 - 郑绪岚
词：王立平
曲：王立平
日出嵩山坳

晨钟惊飞鸟

林间小溪水潺潺

坡上青青草

野果香山花俏

狗儿跳羊儿跑

举起鞭儿轻轻摇

小曲满山飘满山飘

莫道女儿娇

无暇有奇巧

冬去春来十六载

黄花正年少

腰身壮胆气豪

常练武勤操劳

耕田放牧打豺狼

风雨一肩挑一肩挑

风雨一肩挑一肩挑

一肩挑
`;
let opts = {
   lrcTxt: lrctxt,
   audioURL: "https://file.uhsea.com/2411/084853c28b242814a04e290ed762dd8c1V.mp3",
}
let player = new lrcPlayerY(opts);

let circlePoints = [];
let bgcLen = bgc.getTotalLength();

for (let i = 0; i < bgcLen; i++) {
   circlePoints.push(bgc.getPointAtLength(i));
}
//console.log(circlePoints);

var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function(container) {
   var timerSlide = null;
   var indexSlide = 0;

   // 对应的元素
   var eleSlides = [].slice.call(container.querySelectorAll('a'));
   var eleButtons = [].slice.call(container.querySelectorAll('button'));
   var funSlide = function() {
         eleSlides.forEach(function(slide, index) {
            if (!player.mObj.paused) {
               if (indexSlide == index) {
                     slide.classList.add('in');
               } else if (slide.classList.contains('in')) {
                     slide.classList.remove('in');
               }
            }
         });
         timerSlide = setTimeout(function() {
            indexSlide++;
            if (indexSlide == eleSlides.length) {
               indexSlide = 0;
            }
            funSlide();
         },
         12000);
   }
   indexSlide++;
   setTimeout(funSlide, 12000);
});
let formatTime = (time) => {
   let str = '';
   let min = parseInt(time / 60);
   let sec = parseInt(time % 60);
   return ((min < 10 ? '0' + min: min) + ":" + (sec < 10 ? '0' + sec: sec));
};
player.mObj.addEventListener('timeupdate', function() {
   let processValue = player.mObj.currentTime / player.mObj.duration;
   processCircle.style.strokeDashoffset = circumference * (1 - processValue);
   durTime.textContent = formatTime(player.mObj.duration);
   curTime.textContent = formatTime(player.mObj.currentTime);
});

mPlayer.onclick = () => {
   player.mObj.paused ? (mPlayer.style.setProperty('--rState', 'running'), player.mObj.play()) : (mPlayer.style.setProperty('--rState', 'paused'), player.mObj.pause());
}

let seeking = false;
let moveEventProc = (event) => {
   if (!seeking) return;
   let thePoint = 0,
   minV = 100;
   circlePoints.forEach((point, idx) => {
         let mx = (point.x - event.offsetX),my = (point.y - event.offsetY) ;
let mv = mx * mx + my * my;
         if (mv < minV) {
            minV = mv;
            thePoint = idx;
         }
   });
let chkVal = thePoint / circumference;
   let chkTime = player.mObj.duration * chkVal;
   processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
   for (i = 0; i < player.lrcVec.length; i++) {
         if (player.lrcVec.seconds >= chkTime) {
            //console.log(player.lrcVec.seconds, i);
            player.idx = i;
            player.mObj.currentTime = chkTime;
            break;
         }
   };
};
processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
processCircle.onclick = bgc.onclick = () => seeking = !seeking;

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

var mState = () => {
papa.style.setProperty('--state', ['running', 'paused'][ + player.mObj.paused]);
player.mObj.paused ? image0.stop() : image0.play();
};
player.mObj.oncanplay = player.mObj.onplaying = player.mObj.onpause = () => mState();
mPlayer.onclick = () => player.mObj.paused ? player.mObj.play() : player.mObj.pause();
mPlayer.style.animationPlayState = player.mObj.paused ? 'paused': 'running';
player.mObj.addEventListener('playing', () => mPlayer.style.animationPlayState = 'running');
player.mObj.addEventListener('pause', () => mPlayer.style.animationPlayState = 'paused');

// 控制图片的代码
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
this.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("testImg");
}
</script>

杨帆发表于 2024-12-1 18:25

夕阳老师好，此帖是学习您的《北京的秋天》，不清楚加入gif动图后为何就控制不了呢？@夕阳黄昏

杨帆发表于 2024-12-1 19:31

夕阳黄昏发表于 2024-12-1 18:22
没仔细琢磨，凑合着调整了一下

哇，夕阳老师您太强大了！折腾我几天的两只小鸟终于被搞定了！

只知道代码调整好多，但不清楚是否具有普适性？

无论如何，由衷感谢老师，因今晚我终于可以睡个好觉了@夕阳黄昏

杨帆发表于 2024-12-1 21:14

本帖最后由杨帆于 2024-12-10 23:24 编辑

老师您好@夕阳黄昏加了个视频，发现小播不能点击了呀，咋整呢？谢谢{:4_191:}

夕阳黄昏 发表于 2024-12-2 06:29

杨帆发表于 2024-12-1 21:14
老师您好@夕阳黄昏加了个视频，发现小播不能点击了呀，代码见楼上，咋整呢？谢谢

至少第二行又出老毛病了{:5_102:}

发帖的步骤：高级模式 --> 纯文本 --> 附件选项 --> HTML 代码 --> 禁用链接识别 --> 填写帖子名称 --> 粘贴帖子代码 --> 发表帖子

按这个步骤来，正确的代码是不会出错的。

夕阳黄昏 发表于 2024-12-2 08:30

杨帆发表于 2024-12-1 21:14
老师您好@夕阳黄昏加了个视频，发现小播不能点击了呀，代码见楼上，咋整呢？谢谢

几个问题：
1. 第二行老毛病，有了昨天的经验一眼就看出来了；
2. 84行 z-indx：1660, 这个也太大了，就是它的原因导致控制失灵（被遮挡住了）；
3. 飞鸟动态图片好像是私人所有，不希望别人使用，现在链接也失效了；
4. 如果只是为了展示帖子，建议使用马黑现成的封装好的代码，功能全还不易出问题。

夕阳黄昏 发表于 2024-12-2 08:31

页: [1]

花潮论坛's Archiver

请教夕阳老师：如何控制这个动图、添加这个视频？[已解决]