HTML 实现仿 Windows 桌面主题特效

最新推荐文章于 2024-04-26 09:14:08 发布

VIP文章 m0_67402125

最新推荐文章于 2024-04-26 09:14:08 发布

阅读量608

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67402125/article/details/126083489

版权

?? 个人网站:【海拥】【摸鱼小游戏】【开发文档导航】

?? 风趣幽默的人工智能学习网站：??人工智能

?? 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】

?? 免费且实用的计算机相关知识题库：??进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，??点击跳转到网站。

本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：

??【100个摸鱼小游戏】（源码永久免费开源）

直接跳到末尾 参与评论送书
直接跳到末尾 领取完整源码
快速跳转 如何高效学习

目前已上线的小游戏有50+个

游戏入口地址有多个：

摸鱼入口：https://haiyong.site/moyu/
海拥开发文档：https://haiyong.site/doc/
GitHub 源码：https://github.com/wanghao221/moyu

HTML 实现仿 Windows 桌面主题特效

在线演示地址：https://haiyong.site/win/

源码可在文末免费获取

项目基本结构

目录结构如下：

├── jsLib
│   ├── jquery.winResize.js
│   ├── jquery-1.6.2.js
│   ├── jquery-1.6.2.min.js
│   ├── jquery-ui-1.8.16.custom.min.js
│   ├── myLib.js
│   ├── external
│   ├── jquery-smartMenu
│   ├── themes
│   └── ui
├── icon
├── images
├── wallpapers
└── index.html

在这里插入图片描述

?? HTML 代码

HTML 主要代码：

<a href="https://haiyong.site" class="powered_by">Powered by haiyong.site 注意：双击桌面应用即可点开</a>
<ul id="deskIcon">
  <li class="desktop_icon" id="win11" path="https://haiyong.site/"> <span class="icon"><img src="icon/icon14.png"/></span>
    <div class="text">海拥
      <div class="right_cron"></div>
    </div>
  </li>
 <li class="desktop_icon" id="win11" path="https://haiyong.blog.csdn.net/"> <span class="icon"><img src="icon/csdn.png"/></span>
   <div class="text">CSDN
     <div class="right_cron"></div>
   </div>
 </li> 
  <li class="desktop_icon" id="win11" path="https://juejin.cn/user/2040341402229751"> <span class="icon"><img src="icon/juejin.png"/></span>
    <div class="text">掘金
      <div class="right_cron"></div>
    </div&