清明上河图

马黑黑

马黑黑

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa {
        --offsetX: 81px;
        --bg: 
            url('https://638183.freep.cn/638183/t24/w8/uht.webp') no-repeat 0 0/cover,
            url('https://638183.freep.cn/638183/t24/w8/uhtr.webp') no-repeat 1280px 0/cover,
            url('https://638183.freep.cn/638183/t24/w8/uht.webp') no-repeat 2560px/cover,
            lightyellow;
        width: 1280px;
        height: 720px;
        animation: bgmove 150s linear infinite var(--state);
        border: thick double tan;
        color: cyan;
    }
    .player { width: 480px; bottom: 10px; }
    @keyframes bgmove {
        to { background-position: -2560px 0, -1280px 0, 0 0; }
    }
</style>

<div id="pa" class="pa"></div>

<script>
    var options = {
        pa: '.pa',
        urls: [['https://music.163.com/song/media/outer/url?id=2744994959', '清明上河图']],
        fs: false, // 禁用全屏
    };

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

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

    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>

马黑黑

audioplayer 插件可以禁用全屏按钮，代码参考 28 行；

图片的移动借用容器元素的 background-position 属性，详情请参阅即将发布的专题帖

梦江南

哇，清明上河图是大长卷哦，老师只用了二张图片。无缝隙缝合太赞了！

梦江南

学习，学习，再学习！

马黑黑

梦江南 发表于 2026-8-7 13:31
哇，清明上河图是大长卷哦，老师只用了二张图片。无缝隙缝合太赞了！

这个只是截取一小部分，做个样纸

马黑黑

梦江南 发表于 2026-8-7 13:32
学习，学习，再学习！

梦油

清明上河图乃中国十大传世名画之一。这可是难得一见的好帖子。
这里看到的清明上河图，移动速度不快不慢，很好地适应了人们的欣赏习惯，
可见，黑黑先生在制作时是充分考虑了观赏者的需要。