云视窗——支持多端同步的Web桌面UI

1051496412 · 发表于 2021-5-17 13:28:09

本帖最后由 1051496412 于 2021-5-17 14:00 编辑
这是一套Web桌面系统，为了实现多端同步功能，界面主要采用HTML + 原生JS + CSS开发。
下面先放上来一些效果图。
网页端
网页端.jpg

安卓端

也可以实现PC端，易语言 + Chrome内核浏览器 + JS接口即可实现环境检测，这个项目也是近期刚做的，还没来得及写。

项目结构
项目结构.png

代码截图

系统主要特性：
1.支持环境检测
可以有效地检测安卓端、网页端。这个原理与很多H5游戏的环境检测原理是类似的（看过很多类似的写法，他们常用一个变量控制，0表示网页1表示安卓2表示IOS等），可以作为一种启发思路。
2.窗口支持鼠标拖动与鼠标滑动两种方式调整尺寸
安卓端使用拖动方式调整尺寸，源码中附带了APK和安卓端源码，大家安装上试一下即可知道效果；
网页端使用滑动方式调整尺寸，鼠标先按一下要调整的位置（右下角同时调整XY，右侧调整X，下侧调整Y），然后滑动到指定尺寸，再按一下即可停止调整。
3.支持窗口的最大化、最小化等动画效果
点击窗口最大化、最小化按钮即可看出效果。另外，加入了一些动画执行逻辑，如果在一个窗口动画显示过程中，无法进行其它窗口的最大化等操作。可以在页面中放心操作，无论你点得多快都不会出现冲突。
4.支持界面层次管理
可以实现类似Windows系统窗口焦点的功能，最前方的窗口具有和其它窗口不一样的效果，更易区分。
5.代码本地化
页面中用到的JavaScript代码均为中文，新手也可以学习其中的原理。
没有使用外部库，但并未影响展示效果，极具学习价值。

附件：

云视窗UI.rar (1.77 MB, 下载次数: 100)

QQEat · 发表于 2023-10-13 12:24:30

再支持一下！！

QQEat · 发表于 2023-10-13 12:24:16

支持一下！

缥缈星云 · 发表于 2023-5-14 20:49:59

支持开源，谢谢分享

夜色ii · 发表于 2023-5-4 23:21:42

6666666好看炫酷

sixmon · 发表于 2022-12-15 10:35:03

非常有用的代码，谢谢

sixmon · 发表于 2022-12-15 10:34:44

非常有用的代码，下载看看

cunanhai · 发表于 2022-11-29 18:29:46

感谢分享

网络注册会员 · 发表于 2022-11-15 14:04:15

支持楼主

陽陽陽 · 发表于 2022-11-2 04:18:16

半透明的很好看！！！！

		自动登录	找回密码
密码			注册

[2021年界面设计大赛] 云视窗——支持多端同步的Web桌面UI

评分

本帖被以下淘专辑推荐:

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币


70 枚精币	回复本帖可获得 5 枚精币奖励! 每人限 2 次(中奖概率 80 %)

[2021年界面设计大赛] 云视窗——支持多端同步的Web桌面UI

评分

本帖被以下淘专辑推荐:

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚 精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币

回帖奖励 +5 枚精币