朵拉 发表于 2024-3-20 20:47

竹枝词 粤语版（马黑黑原创）

本帖最后由 朵拉 于 2024-3-20 21:12 编辑 <br /><br /><style>
    #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background:url('https://pic.imgdb.cn/item/65fae0229f345e8d039110d8.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; transition: filter 1s; position: relative; z-index: 1; }
    #papa:hover { filter: brightness(1.2); }
    #player { position: absolute; left: 620px; top: 540px; width: 100px; border-radius: 50%; transition: 4s; cursor: pointer; animation: rot .5s infinite alternate var(--state); }
    #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%); }
    @keyframes rot { to { transform: scale(.8); } }
</style>

<div id="papa">
    <img id="player" src="https://638183.freep.cn/638183/t22/51/tree_133167802617361953.jpg" alt="" />
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/23/79/62204e70cf64d.mp4" loop muted></video>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=536131317" autoplay loop></audio>
</div>

<script>
(function() {
    let sF = document.createElement('script');
    sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
    sF.charset = 'utf-8';
    document.querySelector('body').appendChild(sF);
    sF.onload = () => FS({papa: '#papa'});
    let getOffsetPos = (ele) => {
      let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
      while(pa != null) {
            x += pa.offsetLeft;
            y += pa.offsetTop;
            pa = pa.offsetParent;
      }
      return {x, y};
    };
    let mState = () => aud.paused
      ? (papa.style.setProperty('--state','paused'), vid.pause())
      : (papa.style.setProperty('--state','running'), vid.play());
    aud.onpause = () => mState();
    aud.onplaying = () => mState();
    player.onclick = () => aud.paused ? aud.play() : aud.pause();
    let movTimer = null,
      paWidth = papa.clientWidth,
      paHeight = papa.clientHeight,
      sonSize = player.clientWidth,
      bodyWidth = document.body.clientWidth,
      bodyHeight = document.body.clientHeight,
      paOffset = {x: getOffsetPos(papa).x, y: getOffsetPos(papa).y};
    document.onmousemove = function(e) {
      clearTimeout(movTimer);
      movTimer = setTimeout(function() {
            if(e.target.id === "player") return;
            if(document.fullscreenElement === null) {
                let x = e.pageX, y = e.pageY;
                if(x < paOffset.x) x = paOffset.x;
                if(y < paOffset.y) y = paOffset.y;
                x = x - paOffset.x;
                y = y - paOffset.y;
                if(x + sonSize >= paWidth) x = paWidth - sonSize;
                if(y + sonSize >= paHeight) y = paHeight - sonSize;
                player.style.cssText += `left: ${x}px; top: ${y}px`;
            } else {
                let xx = e.offsetX || e.layerX, yy = e.offsetY || e.layerY;
                if(xx + sonSize > bodyWidth) xx -= sonSize;
                if(yy + sonSize > bodyHeight) yy -= sonSize;
                player.style.cssText += `left: ${xx}px; top: ${yy}px`;
            }
      }, 400);
    };
})();
</script>

樵歌 发表于 2024-3-20 21:10

沙发欣赏{:4_187:}

朵拉 发表于 2024-3-20 21:13

樵歌 发表于 2024-3-20 21:10
沙发欣赏

樵歌 晚上好，您神速哈~~{:4_180:}

朵拉 发表于 2024-3-20 21:14

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}

小辣椒 发表于 2024-3-20 21:32

朵拉这个图图意境好美{:4_199:}

马黑黑 发表于 2024-3-20 21:35

欣赏美作

红影 发表于 2024-3-20 22:15

漂亮，意境很开阔。欣赏朵宝好帖{:4_187:}

樵歌 发表于 2024-3-21 19:49

朵拉 发表于 2024-3-20 21:13
樵歌 晚上好，您神速哈~~

朵儿好{:4_190:}
页: [1]
查看完整版本: 竹枝词 粤语版（马黑黑原创）