战地往事

马黑黑

马黑黑

帖子代码

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
   
3.         .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w7/vjdi.webp') no-repeat center/cover; }
   
4.         .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; }
   
5. </style>
   
6. 
   
7. <div class="pa"></div>
   
8. 
   
9. <script type="module">
   
10.         import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
    
11.         const tz = TZ.TZ('pa');
    
12.         tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/15653652/01/17/82/61bf0ef37a338.mp4'});
    
13.         tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=425710047'});
    
14.         tz.add('div', 'mama', 'wrap200 ma hue-rotate').playmp3();
    
15.         tz.lzRot(5, 'mama', {className: 'petal'});
    
16.         tz.bgprog().style('color: silver; bottom: 20px;');
    
17.         tz.fs().style('bottom: 20px; left: 20px');
    
18. </script>

复制代码

马黑黑

混合加密压缩之后，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" 即可被它们识别。

马黑黑

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

        export default{TZ:TZ};

梦江南

谢谢黑黑老师辛苦！

马黑黑

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

红影

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

红影

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

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

红影

恭喜黑黑完成了 .f 版的正式版本，辛苦了

红影

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

杨帆

体量小，能量大，效果棒。马老师您辛苦了。

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

马黑黑

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

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

瘦美是当下的审美标准

马黑黑

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

能的

马黑黑

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

是的

马黑黑

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

还好

马黑黑

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

基本定型了吧

红影

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

这样的小播也很奇妙呢

红影

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

这样的主题真好。

红影

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

非常简约，做贴的福音呢

红影

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

恭喜