论坛 › 欢乐水吧 › 玩动图

亚伦影音工作室 发表于 2025-2-22 17:38

玩动图

本帖最后由 亚伦影音工作室 于 2025-2-23 00:14 编辑 <br /><br /><style>
#papa{left: -23%; top: 100%; width:1280px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:url('https://pic1.imgdb.cn/item/67b97047d0e0a243d401d3d8.png') no-repeat center/cover;position: relative;--state: running;}
#dt{
      position:absolute;z-index: 1;
      width: 100%;
      height: 100%;
      top:0%;
   left: 0%;}
#dt img{width: 100%;
      height: 100%;
    }
#bofangqi{left: 1%; bottom:6px; width:98%;position: absolute; height:55px; border-radius:6px; box-shadow: 0px 0px 0px 0.25px #fff;overflow: hidden; align-items: center; z-index: 2;background:url('https://pic1.imgdb.cn/item/66c40607d9c307b7e912340a.png') no-repeat center/cover }
.progress {display: flex;align-items: center; z-index: 8;
      justify-content: space-between;width: 86%;
      position: absolute;bottom: 16px;
   left: 8%;height:30px;
    }
   .progress-bar {
      position:relative;
      width: 75%;
      height: 4px;
      background-color: #fff;
   left: 0%;border-radius: 20px;
      cursor: pointer;
    }
   .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 4px;border-radius: 20px;
      width: 75%;
      background: #009900;
    }
    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 10px;margin: -3px -3px;
      height: 10px;border-radius: 50px;
      background-color: #009900;
    }
.start{color: #fff; font: 400 14px sans-serif;position: absolute;left: -5%;
       }
.end{color: #fff; font: 400 14px sans-serif;position: absolute;right:20%;
      }
#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;}
#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   top: 8%;cursor: pointer;right:8%;z-index: 8; }
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;z-index: 8;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover;z-index: 8;}
#yink {left: 75%;bottom:4px;width: 24%;height: 50px;position:absolute; overflow: hidden;background:#0000;box-shadow: 0px 0px 0px 0.25px #fff; align-items: center; transform:scale(0.7);cursor: pointer;
             align-items: center;border-radius: 8px;z-index: 8;}

input{margin: 22px 42px;cursor: pointer;
             position: absolute;z-index: 9;
         width: 78%; height: 6px;border-radius: 20px;
filter:invert(15%)hue-rotate(290deg);
}

#swithimg{margin: 8px 10px;width: 35px; height: 35px;filter:invert(90%)hue-rotate(0deg);z-index: 10; cursor: pointer;
             position: absolute;}
#loopbnt{   z-index: 9;
      position:absolute;
      width: 25px;
      height: 20px;background:#0000;
      bottom: 24px;border-radius: 0px;
   right:2%;filter:invert(100%)hue-rotate(180deg);
      cursor: pointer;
    }
</style>
<div id="papa">
<div id="dt">
<img src="https://file.uhsea.com/2502/2b3c25901c09cbc91381dcd6afb4e726LP.gif"id="IMG" />
</div>
<div id="bofangqi">
<div class="progress" >
      <span class="end">00:00</span>

      <div class="progress-bar"title="快进/快退">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>
</div>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="yink">
<img src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png" height="30" width="30" id="swithimg">
<inputtype="range" min="0" max="1" step="0.1" value="0.9" id="volumeSlider">
</div>

<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>
<audio src="https://s2.ananas.chaoxing.com/sv-w8/audio/97/35/d4/903c81699176923a3617cf3046e99ca8/audio.mp3" id="aud"autoplay ></audio>
<script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
window.onload = function(){
      var swithimg = document.getElementById("swithimg");
      var mm = true;
      swithimg.onclick= function(){
            if (mm == true) { volumeSlider.value=0;aud.muted= true;
                swithimg.src="https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png";
                return mm=false;
            }else{volumeSlider.value=0.8;aud.muted= false;
                swithimg.src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png";
                return mm=true;
            }   
      };      
    };
const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    aud.currentTime = p * aud.duration
    aud.play()
})

setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)

bnt.onclick = () => aud.paused ? (aud.play(),image.play(),picc.style.opacity= '0',pic.style.opacity = '1') : (aud.pause(),image.stop(),picc.style.opacity = '1',pic.style.opacity = '0');
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

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";}
}
</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>
<script>
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>

亚伦影音工作室 发表于 2025-2-22 17:38

https://file.uhsea.com/2502/96f23c8e4e3bde0f279f91bc4f542fefHG.gif

红影 发表于 2025-2-22 18:43

这图图真漂亮，这女子的眼睛很勾魂呢{:4_173:}
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-2-22 18:47

二楼的图图也很漂亮。好像代码里有问题，帖子最上方好像论坛设置有变化。
不知是哪句引起的。

红影 发表于 2025-2-22 18:49

这个代码问题让设置高亮和精华的操作界面都出现问题了呢{:4_204:}

亚伦影音工作室 发表于 2025-2-22 20:50

红影 发表于 2025-2-22 18:49
这个代码问题让设置高亮和精华的操作界面都出现问题了呢

我用的是论坛发图方法！

红影 发表于 2025-2-22 21:56

亚伦影音工作室 发表于 2025-2-22 20:50
我用的是论坛发图方法！

不知道怎么回事，连评分也没法评呢，评完点击发送的地方被遮挡了。

小辣椒 发表于 2025-2-22 22:47

亚纶这个是视频截图，动图文件太大了，网速慢的打开会卡，你是17.7MB 再小一点打开会快一点

小辣椒 发表于 2025-2-22 22:49

二楼的居然43个MB太大了，一直在转啊转的，很久才打开

小辣椒 发表于 2025-2-22 22:50

加不了分

查看完整版本: 玩动图