马黑黑 发表于 2026-8-7 12:19

清明上河图

<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>

马黑黑 发表于 2026-8-7 12:20

<div class="hEdiv" data-prev="1"><pre class="hEpre">
&lt;style&gt;
    @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; }
    }
&lt;/style&gt;

&lt;div id="pa" class="pa"&gt;&lt;/div&gt;

&lt;script&gt;
    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);
    }
&lt;/script&gt;
</pre></div>

<script type="module">
    import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
    const divs = document.querySelectorAll('.hEdiv');
    const pres = document.querySelectorAll('.hEpre');
    divs.forEach((div,idx) => hl.hl(div, pres));
</script>

马黑黑 发表于 2026-8-7 12:23

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

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

梦江南 发表于 2026-8-7 13:31

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

梦江南 发表于 2026-8-7 13:32

学习，学习，再学习！{:4_204:}

马黑黑 发表于 2026-8-7 13:54

梦江南 发表于 2026-8-7 13:31
哇，清明上河图是大长卷哦，老师只用了二张图片。无缝隙缝合太赞了！
这个只是截取一小部分，做个样纸

马黑黑 发表于 2026-8-7 13:54

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

{:4_190:}

梦油 发表于 2026-8-7 15:07

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

红影 发表于 2026-8-7 16:40

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

杨帆 发表于 2026-8-7 18:29

效果漂亮，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2026-8-7 19:36

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

感谢支持

马黑黑 发表于 2026-8-7 19:37

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

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

马黑黑 发表于 2026-8-7 19:40

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

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

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

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

高级！{:4_187:}

霜染枫丹 发表于 2026-8-7 20:21

谢谢马老师的分享，很漂亮的形式，很简约好用的代码，赞佩！！{:4_204:}{:4_190:}

夕阳黄昏 发表于 2026-8-7 20:50

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

马黑黑 发表于 2026-8-7 21:13

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

对。这里其实只用两张图

马黑黑 发表于 2026-8-7 21:14

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

{:4_180:}

马黑黑 发表于 2026-8-7 21:14

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

{:4_190:}

红影 发表于 2026-8-7 22:47

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

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

看样子你对我的回复没看清楚，我说的就是这个意思啊。模块里已经设定好了，我说的也是这个意思啊{:4_173:}
页: [1] 2
查看完整版本: 清明上河图