- 还记得前两年朋友圈刷屏的「便携小空调」吗?那个能模拟空调吹风、调温,甚至带点小音效的趣味小程序,当时几乎每个人的社交圈都被它 "降温" 了一把。
- 但一直有个小遗憾:这玩意儿大多是微信小程序,想搬到自己的网站上总有点麻烦 —— 得转成 H5 格式,还得处理适配问题。最近突然灵光一闪:要是能把它塞进子比主题的文章侧边栏(首页也能放),夏天逛网站时看着它,说不定还真能多几分清凉感?
- 说干就干。试了好几次,改了不少空调的源码,也调了子比主题的侧边栏适配逻辑,最后总算成了。其实原理不复杂,核心是用 iframe 嵌入现成的 H5 版空调页面,再用一段脚本自动适配侧边栏高度,避免出现滚动条或显示不全的问题。
![图片[1]-子比主题 – 文章侧边栏添加便携小空调-黑猫博客](https://oss.zibll.com/zibll.com/2025/08/20250803012903138-GIF-2025-8-3-1-22-02.gif?x-oss-process=image%2Fresize,m_fill,w_1024,h_464)
不想自己折腾找源码的话,直接复制下面的代码,粘贴到子比主题的「文章侧边栏自定义 HTML」里就行(首页侧边栏也能用,操作类似):
- 代码里的
src
链接是我找的现成 H5 空调页面,打开后能看到模拟的空调面板,支持调风速、温度,还有 "吹风" 动画。如果想换其他样式的空调,自己网上搜「便携小空调 H5 源码」,替换src
里的链接就行。
- 侧边栏加个这小玩意儿,既能呼应夏天的氛围,又能给网站添点互动感,感兴趣的话不妨试试~我自己的站还没来得及写教程文,等明天整理好细节再发,先把核心代码分享出来,大家可以先玩起来~
H5空调源码
温馨提示:
本文最后更新于
2025-08-03 16:46:20
,某些文章具有时效性,若有错误或已失效,请在下方
留言或联系
黑猫
。
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
暂无评论内容