论坛 › 欢乐水吧 › 无不良引导

亚伦影音工作室 发表于 2025-2-26 18:47

无不良引导

本帖最后由 亚伦影音工作室 于 2025-3-9 22:17 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 680px); background:url('https://file.uhsea.com/2502/96f23c8e4e3bde0f279f91bc4f542fefHG.gif') no-repeat center/cover;width: 1186px; height: 680px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}
#dt{
      position:absolute;z-index: 2;
      width: 100%;
      height: 100%;mix-blend-mode: lighten;
      top:0%;
   left: 0%;    }
#dt img{width: 100%;
      height: 100%;
    }

#vid {width: 100%; height: 100%; z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#mb{width: 100%; height: 100%;z-index: 2;
position:absolute;background: linear-gradient(0deg, #03305D 6%,#Fff 6.5%,rgba(26, 188, 156, 0) 5%);
top:100%; left:0%;opacity:0;}
        #mboard {width:100%;height:200px;display: flex; justify-content: center; align-items:center;gap: 8px; position: absolute; bottom: -100px;right: 20px; z-index: 3;opacity:0;}

#papa:hover #mboard{opacity:1;bottom: -80px;}
#papa:hover #mb{opacity:1;top:0%;}

        #mboard img { width: 26px; cursor: pointer; filter:invert(100%)hue-rotate(180deg);}
        #tMsg1, #tMsg2 { width: 45px; font-size: 13px; text-align: center;color: #eee; }
        #volwrap { position: absolute; width: 100px; height: 80px;place-items: center;border-radius: 20px;transform:rotate(-90deg);right: -14px;bottom: 130px;}
        input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
input::-webkit-slider-runnable-track {
    height: 4px;border-radius: 20px;
    background: #eee;
}
input::-webkit-slider-container {
    height: 18px;border-radius: 30px;
    overflow: hidden;
}
input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:#039C09;
    border: 1px solid transparent;
    margin-top: -4px;
    border-image: linear-gradient( #039C09, #039C09) 0 fill / 5 10 5 0 / 0px 0px 0 2000px;
}

#volwrap:hover #volume { opacity:1;}
        #btnMute:hover ~ #volwrap > #volume {opacity:1; }
#volume { position: absolute; width: 100px; height: 2px;opacity:0;}
        #prog { --track:#eee; --prog:#039C09 ; --prg: 0%; width: 78%; height: 20px; cursor: pointer; background: linear-gradient(to right, var(--prog) var(--prg), var(--track) 0) no-repeat 0% 50%/100% 4px; border-radius: 20px;align-items: center;}
#loopbnt{position:absolute; width: 25px;height: 20px; bottom: 92px;right: 8px;filter:invert(80%)hue-rotate(180deg);cursor: pointer;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 50px; cursor: pointer;right: 25px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<div id="dt">
<img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif"id="IMG" />
</div>
<div id="mb"> </div>
<video id="vid" src="https://img0.oldkids.cn/upload/2020/02/19/ue_15821093036400.mp4" autoplay loop muted></video>
<div id="mboard">
        <img id="btnPlay" src="https://638183.freep.cn/638183/web/icon/play.svg" title="播放/暂停(Alt+X)" alt="" />
        <span id="tMsg1">00:00</span>
        <span id="prog"></span>
        <span id="tMsg2">00:00</span>
        <img id="btnMute" src="https://638183.freep.cn/638183/web/icon/unmuted.svg" title="静音 (Alt+J)" alt="" />
        <div id="volwrap"><input id="volume" type="range" min="0" max="1" step="0.1" value="0.8" /></div>
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
</div>
<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
</div>
<p><audio id="aud" src="http://img0.oldkids.cn/upload/2021/06/20/blog_260855907_20210620113141577.mp3" autoplay ></audio></p>

<script>
       
var lastVolume = 1, muted = false;

var imgAr = [
        'https://638183.freep.cn/638183/web/icon/play.svg',
        'https://638183.freep.cn/638183/web/icon/pause.svg',
        'https://638183.freep.cn/638183/web/icon/unmuted.svg',
        'https://638183.freep.cn/638183/web/icon/muted.svg',
];

var setVolume = (val) => Math.min(1, Math.max(0, val));

var setMute = () => {
        if(lastVolume === 0) return;
        muted = !muted;
        muted ? (aud.volume = 0, btnMute.src = imgAr) : (aud.volume = lastVolume, btnMute.src = imgAr);
};

var s2m = (seconds) => {
    const secs = Math.floor(seconds || 0);
    return `${String(secs/60|0).padStart(2,'0')}:${String(secs%60).padStart(2,'0')}`;
};

var mState = () => {
        btnPlay.src = aud.paused ? imgAr : imgAr;
        btnPlay.title = (aud.paused ? '播放' : '暂停') + ' (Alt+X)';
};

document.addEventListener('keydown', e => {
        if(!e.altKey) return;
        switch (e.keyCode) {
                case 88:
                        btnPlay.click();
                        break;
                case 74:
                        setMute();
                        break;
                case 187: case 107:
                        aud.volume = setVolume(aud.volume + 0.1);
                        lastVolume = aud.volume;
                        break;
                case 189: case 109:
                        aud.volume = setVolume(aud.volume - 0.1);
                        lastVolume = aud.volume;
                        break;
                default:
                        return;
        }
});

aud.onplaying = aud.onpause = () => mState();

aud.ontimeupdate = () => {
        prog.style.setProperty('--prg', aud.currentTime/aud.duration*100 +'%');
        tMsg1.innerText = s2m(aud.currentTime);
        tMsg2.innerText = s2m(aud.duration);
};

aud.onvolumechange = () => {
        btnMute.src = aud.volume === 0 ? imgAr : imgAr;
        volume.value = aud.volume;
}

btnPlay.onclick = () => aud.paused ? (aud.play(),vid.play(),image.play() ): (aud.pause(),vid.pause(),image.stop());
btnMute.onclick = () => setMute();
volume.onchange = () => aud.volume = lastVolume = volume.value;
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
prog.onmousemove = (e) => prog.title = s2m(e.offsetX * aud.duration / prog.offsetWidth);
volwrap.onmouseover = () => volwrap.title = '音量 : ' + volume.value + ' (Alt++/-)'
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      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("IMG");
</script>

杨帆 发表于 2025-2-26 20:15

美曲美景美女美帖，谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2025-2-26 20:46

还要特地说明一下啊，看得笑。
很漂亮的制作，欣赏亚伦老师好帖{:4_187:}

查看完整版本: 无不良引导