清明上河图

马黑黑

马黑黑

<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
学习，学习，再学习！

梦油

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

红影

fs: false, // 禁用全屏，这是原本设计了全屏的时候用的吧，否则本身没设置的也就用不到了

杨帆

效果漂亮，谢谢马老师精彩分享

马黑黑

杨帆 发表于 2026-8-7 18:29
效果漂亮，谢谢马老师精彩分享

感谢支持

马黑黑

梦油 发表于 2026-8-7 15:07
清明上河图乃中国十大传世名画之一。这可是难得一见的好帖子。
这里看到的清明上河图，移动速度不快不慢， ...

过奖。这里主要是音乐欣赏。至于清明上河图，仅截取一小部分，非全卷。

马黑黑

红影 发表于 2026-8-7 16:40
fs: false, // 禁用全屏，这是原本设计了全屏的时候用的吧，否则本身没设置的也就用不到了

看样子你对我近期发布的支持全屏的JS帖子模块了解不够。

这个 audioplayer.js，缺省默认支持全屏，并不用使用者去设计全屏按钮（仅需设定文本颜色、定位）。使用 audioplayer 模块发帖，只有在配置中设置 fs: false 才能禁用全屏功能。

小文

高级！

霜染枫丹

谢谢马老师的分享，很漂亮的形式，很简约好用的代码，赞佩！！

夕阳黄昏

滚动的（多图片构成）长卷最末一张重复第一张。

马黑黑

夕阳黄昏 发表于 2026-8-7 20:50
滚动的（多图片构成）长卷最末一张重复第一张。

对。这里其实只用两张图

马黑黑

霜染枫丹 发表于 2026-8-7 20:21
谢谢马老师的分享，很漂亮的形式，很简约好用的代码，赞佩！！

马黑黑

小文 发表于 2026-8-7 19:48
高级！

红影

马黑黑 发表于 2026-8-7 19:40
看样子你对我近期发布的支持全屏的JS帖子模块了解不够。

这个 audioplayer.js，缺省默认支持全屏，并 ...

看样子你对我的回复没看清楚，我说的就是这个意思啊。模块里已经设定好了，我说的也是这个意思啊