马黑黑 发表于 2025-10-26 17:13

战地往事

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/vjdi.webp') no-repeat center/cover; }
        .petal { top: 0; width: 50%; height: 50%; transform-origin: 50% 100%; background: url('https://638183.freep.cn/638183/small/tea.png') no-repeat center/cover; }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
        const tz = TZ.TZ('pa');
        tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/15653652/01/17/82/61bf0ef37a338.mp4'});
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=425710047'});
        tz.add('div', 'mama', 'wrap200 ma hue-rotate').playmp3();
        tz.lzRot(5, 'mama', {className: 'petal'});
        tz.bgprog().style('color: silver; bottom: 20px;');
        tz.fs().style('bottom: 20px; left: 20px');
</script>

马黑黑 发表于 2025-10-26 17:13

帖子代码

<style>
        @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
        .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/vjdi.webp') no-repeat center/cover; }
        .petal { top: 0; width: 50%; height: 50%; transform-origin: 50% 100%; background: url('https://638183.freep.cn/638183/small/tea.png') no-repeat center/cover; }
</style>

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

<script type="module">
        import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
        const tz = TZ.TZ('pa');
        tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/15653652/01/17/82/61bf0ef37a338.mp4'});
        tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=425710047'});
        tz.add('div', 'mama', 'wrap200 ma hue-rotate').playmp3();
        tz.lzRot(5, 'mama', {className: 'petal'});
        tz.bgprog().style('color: silver; bottom: 20px;');
        tz.fs().style('bottom: 20px; left: 20px');
</script>

马黑黑 发表于 2025-10-26 17:22

混合加密压缩之后，tz.min.js 体量仅为 12.1KB，非常小巧了。模块基于 .f 版，想查看源码的朋友可以最新的 .f 版本。

配套的CSS文档也做了简单压缩，4.08KB的体量。

两个资源文档地址：

    CSS :'https://638183.freep.cn/638183/web/tz/tz.min.css'
    JS:      'https://638183.freep.cn/638183/web/tz/tz.min.js'

这两个将作为本阶段正式版本，JS是模块，CSS是配套样式。HTML代码使用 class="pa" 即可被它们识别。

马黑黑 发表于 2025-10-26 17:24

.js 作为ES6模块工作，如果需要它像普通插件一样工作，下载到源码后，将最后一句，即下面这句删掉即可：

      export default{TZ:TZ};

梦江南 发表于 2025-10-26 17:29

谢谢黑黑老师辛苦！{:4_190:}

马黑黑 发表于 2025-10-26 19:48

梦江南 发表于 2025-10-26 17:29
谢谢黑黑老师辛苦！

{:4_190:}

红影 发表于 2025-10-26 19:55

原来小播是一枚叶子旋转组成的，还规定了旋转的基点。不用自己画也能转出小播呢{:4_187:}

红影 发表于 2025-10-26 19:56

马黑黑 发表于 2025-10-26 17:22
混合加密压缩之后，tz.min.js 体量仅为 12.1KB，非常小巧了。模块基于 .f 版，想查看源码的朋友可以最新的...

两个文档的体量这么小巧，使用他们后的代码也这么简约，这个太好了{:4_199:}

红影 发表于 2025-10-26 19:57

恭喜黑黑完成了 .f 版的正式版本，辛苦了{:4_199:}

红影 发表于 2025-10-26 20:00

画面里有坦克还有个模糊的战士的身影，残酷的战争。
这5片绿叶的小播是橄榄叶么，这是暗示对和平的期待吧{:4_204:}

杨帆 发表于 2025-10-26 20:03

体量小，能量大，效果棒。马老师您辛苦了。{:4_180:}

其实，帖子体量也不一定越小越好，以免太单薄呦{:4_173:}

马黑黑 发表于 2025-10-26 21:51

杨帆 发表于 2025-10-26 20:03
体量小，能量大，效果棒。马老师您辛苦了。

其实，帖子体量也不一定越小越好，以免太单薄呦{:4 ...

瘦美是当下的审美标准{:4_189:}

马黑黑 发表于 2025-10-26 21:51

红影 发表于 2025-10-26 19:55
原来小播是一枚叶子旋转组成的，还规定了旋转的基点。不用自己画也能转出小播呢

能的

马黑黑 发表于 2025-10-26 21:52

红影 发表于 2025-10-26 20:00
画面里有坦克还有个模糊的战士的身影，残酷的战争。
这5片绿叶的小播是橄榄叶么，这是暗示对和平的期待吧{ ...

是的

马黑黑 发表于 2025-10-26 21:52

红影 发表于 2025-10-26 19:56
两个文档的体量这么小巧，使用他们后的代码也这么简约，这个太好了

还好

马黑黑 发表于 2025-10-26 21:52

红影 发表于 2025-10-26 19:57
恭喜黑黑完成了 .f 版的正式版本，辛苦了

基本定型了吧

红影 发表于 2025-10-26 22:47

马黑黑 发表于 2025-10-26 21:51
能的

这样的小播也很奇妙呢{:4_187:}

红影 发表于 2025-10-26 22:47

马黑黑 发表于 2025-10-26 21:52
是的

这样的主题真好。

红影 发表于 2025-10-26 22:48

马黑黑 发表于 2025-10-26 21:52
还好

非常简约，做贴的福音呢{:4_204:}

红影 发表于 2025-10-26 22:48

马黑黑 发表于 2025-10-26 21:52
基本定型了吧

恭喜{:4_191:}
页: [1] 2
查看完整版本: 战地往事