江上清风游 单幅图片横移（有代码） 转自马黑教程专版

admin

admin

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; color: yellow; }
    .pa::before, .pa::after { position: absolute; content: ''; inset: 0; background: url('https://638183.freep.cn/638183/t24/7/t24.jpg') no-repeat center/cover; z-index: -2; }
    .pa::before { background-position: var(--begin1) 0; }
    .pa::after {
        transform: scale(-1, 1);
        background-position: var(--begin2) 0;
    }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #mpic { width: 160px; bottom: 50px; }
</style>

<div id="pa" class="pa">
    <img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/04/5b5085d637d83.mp4" autoplay loop muted></video>
</div>

<script>
    var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;

    var options = {
        pa: '.pa',
        urls: [['https://music.163.com/song/media/outer/url?id=32743519', '江上清风游']],
        btns: [mpic],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
        var aud = new AudPlayer(options);

        function bgMove() {
            var ww = aud.pa.offsetWidth;
            function moving() {
                cancelAnimationFrame(raf);
                begin1 += speed;
                if (speed > 0) {
                    if (begin1 >= ww) begin1 = -ww;
                } else {
                    if(begin1 <= -ww) begin1 = ww;
                }
                begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
                aud.pa.style.setProperty('--begin1', begin1 + 'px');
                aud.pa.style.setProperty('--begin2', begin2 + 'px');
                aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
            }
            moving();
        }

        aud.aud.onpause = () => bgMove();
        aud.aud.onplaying = () => bgMove();
        window.onresize = () => bgMove();
    }

    function loadJs(url, callback) {
        var script = document.createElement('script');
        script.charset = 'utf-8';
        script.src = url;
        script.onload = function() {
            if (callback) callback();
        };
        document.head.appendChild(script);
    }
</script>

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=95153&pid=2657148&page=1&extra=#pid2657148