# webui

**Repository Path**: fieldyang/webui

## Basic Information

- **Project Name**: webui
- **Description**: web 交互技术 课程案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-18
- **Last Updated**: 2025-10-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web交互设计-教学案例

## 说明
西南科技大学 “Web交互设计/Web前端开发” 课程教学案例，通过9个案例进行实践教学。

## 运行方式
为避免跨域(cross domain)问题，需使用服务器方式，建议：vscode + live server插件，打开html页面后，在编辑区右键菜单点击 open with live server打开页面。

## 案例1-粒子效果
通过canvas粒子效果，实现国旗生成效果。

## 案例2-canvas版本别踩白块
通过canvas绘制别踩白块游戏，实现简单交互。

## 案例3-html版本别踩白块
通过html实现别踩白块游戏，实现简单交互。

## 案例4-视频播放器
通过json数据、视频播放器，实现视频数据列表构建和播放。

## 案例5-注册页面
模拟qq注册页面，实现数据校验、异常提示。

## 案例6-图像切割插件
实现图像按区域切割功能。

## 案例7-图像移动插件
实现图像移动、缩放功能。

## 案例8-轮播图
实现轮播图功能。

## 案例9-js全栈实践
设计一个简单的学生信息管理系统，采用vue+noomi+relaen实现前后端开发，数据库采用mysql5+。