# case

**Repository Path**: sumsu/case

## Basic Information

- **Project Name**: case
- **Description**: 学习前端知识做的案例集合
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-16
- **Last Updated**: 2025-10-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

项目下载地址：https://gitee.com/sumsu/case



案例列表：

## HTML+CSS

- [1.表单练习](https://sumsu.gitee.io/case/web/1.表单练习/index.html)

HTML表单综合练习

- [2.HTML简单页面练习](https://sumsu.gitee.io/case/web/2.HTML简单页面练习/index.html)

CSS样式基础运用

- [3.五彩导航](https://sumsu.gitee.io/case/web/3.五彩导航/index.html)

伪元素选择器综合运用

- [4.学成在线](https://sumsu.gitee.io/case/web/4.学成在线/index.html)

HTML+CSS标准流+浮动综合运用实例

- [5.子绝父相定位](https://sumsu.gitee.io/case/web/5.子绝父相定位/index.html)

绝对定位及"子绝父相"综合案例

- [6.定位及元素的显示与隐藏](https://sumsu.gitee.io/case/web/6.定位及元素的显示与隐藏/index.html)

利用定位及元素的显示与隐藏，实现鼠标经过盒子，显示遮罩及播放按钮。

- [7.大数据热点图](https://sumsu.gitee.io/case/web/7.大数据热点图/index.html)

CSS3中2D动画练习。

- [8.奔跑的大熊](https://sumsu.gitee.io/case/web/8.奔跑的大熊/index.html)

速度曲线steps()步长练习。

- [9.两面翻转的盒子](https://sumsu.gitee.io/case/web/9.两面翻转的盒子/index.html)

3D旋转动画案例练习。

- [10.3D导航栏案例](https://sumsu.gitee.io/case/web/10.3D导航栏案例/index.html)

3D旋转动画案例练习。

- [11.3D旋转木马案例](https://sumsu.gitee.io/case/web/11.3D旋转木马案例/index.html)

3D旋转动画案例练习。

- [12.移动端流式布局](https://sumsu.gitee.io/case/web/12.移动端流式布局/index.html)

移动端京东首页制作，流式布局综合案例。

- [13.flex弹性布局](https://sumsu.gitee.io/case/web/13.flex弹性布局/index.html)

移动端携程首页制作，flex弹性布局综合案例。



## JavaScript

[1.仿京东密码显示隐藏](https://sumsu.gitee.io/case/JavaScript/1.仿京东密码显示隐藏/index.html)

登录密码框密码显示与隐藏案例

[2.循环显示精灵图案例](https://sumsu.gitee.io/case/JavaScript/2.循环显示精灵图案例/index.html)

通过JS循环显示精灵图案例

[3.表单属性案例](https://sumsu.gitee.io/case/JavaScript/3.表单属性案例/index.html)

操作表单元素属性，实现鼠标聚焦失焦交互效果。

[4.密码框提示信息](https://sumsu.gitee.io/case/JavaScript/4.密码框提示信息/index.html)

样式属性操作案例，输入框输入内容提示信息。

[5.百度换肤案例](https://sumsu.gitee.io/case/JavaScript/5.百度换肤案例/index.html)

样式属性操作案例，点击图片，更换背景图。

[6.鼠标经过表格行变色案例](https://sumsu.gitee.io/case/JavaScript/6.鼠标经过表格行变色案例/index.html)

鼠标事件，鼠标经过表格所在的行背景颜色发生改变。

[7.表格全选取消全选](https://sumsu.gitee.io/case/JavaScript/7.表格全选取消全选/index.html)

单选所有商品，全选框自动勾选，单选中存在一个未选中则自动取消全选框勾选。点击全选框选择单选框所有，否则取消所有单选框。

[8.Tab栏切换](https://sumsu.gitee.io/case/JavaScript/8.Tab栏切换/index.html)

当鼠标点击tab栏相应的选项卡，内容相应变化。

[9.简单留言板](https://sumsu.gitee.io/case/JavaScript/9.简单留言板/index.html)

简单制作留言板案例，每发布一次留言在下面自动生成。

[10.删除留言案例](https://sumsu.gitee.io/case/JavaScript/10.删除留言案例/index.html)

在简单留言板基础上添加留言板删除留言功能。

[11.下拉菜单](https://sumsu.gitee.io/case/JavaScript/11.下拉菜单/index.html)

鼠标经过显示子菜单。

[12.动态生成表格案例](https://sumsu.gitee.io/case/JavaScript/12.动态生成表格案例/index.html)

利用JS生成表格数据。

13.innerHTML与createElement效率测试

[1.innerHTML拼接效率测试](https://sumsu.gitee.io/case/JavaScript/13.效率测试/1.innerHTML.html)

[2.innerHTML数组效率测试](https://sumsu.gitee.io/case/JavaScript/13.效率测试/2.innerHTML.html)

[3.createElement效率测试](https://sumsu.gitee.io/case/JavaScript/13.效率测试/3.createElement.html)


[14.模仿京东快递查询框案例](https://sumsu.gitee.io/case/JavaScript/14.模仿京东快递查询框案例/index.html)

[15.获取URL的参数数据案例-登录](https://sumsu.gitee.io/case/JavaScript/15.获取URL的参数数据案例/login.html)

[15.获取URL的参数数据案例-首页](https://sumsu.gitee.io/case/JavaScript/15.获取URL的参数数据案例/index.html)

[16.history对象-首页](https://sumsu.gitee.io/case/JavaScript/16.history对象/index.html)

[16.history对象-list](https://sumsu.gitee.io/case/JavaScript/16.history对象/list.html)

[17.获取鼠标在盒子内的坐标](https://sumsu.gitee.io/case/JavaScript/17.获取鼠标在盒子内的坐标/index.html)

offset应用，鼠标在盒子内移动时，获取鼠标坐标。

[18.拖动的模态框](https://sumsu.gitee.io/case/JavaScript/18.拖动的模态框/index.html)

offset应用，实现注册登录窗口拖动效果。

[19.京东放大镜效果](https://sumsu.gitee.io/case/JavaScript/19.京东放大镜效果/index.html)

offset应用，模仿京东商品详情页放大镜效果。

[20.轮播图制作](https://sumsu.gitee.io/case/JavaScript/20.轮播图制作/index.html)

轮播图也称为焦点图，是网页中比较常见的网页特效。

[21.animate](https://sumsu.gitee.io/case/JavaScript/21.animate/index.html)

动画函数给不同元素记录不同定时器。

[缓动效果基本代码效果](https://sumsu.gitee.io/case/JavaScript/21.animate/demo.html)

缓动效果实现效果。

[回调函数](https://sumsu.gitee.io/case/JavaScript/21.animate/function.html)

利用回调函数实现执行动画函数完成后盒子变红。

[constantanimate.js](https://sumsu.gitee.io/case/JavaScript/21.animate/constantanimate.js)

封装匀速动画函数js代码。

[animate.js](https://sumsu.gitee.io/case/JavaScript/21.animate/animate.js)

封装缓动动画函数js代码。

[引用animate.js案例示例](https://sumsu.gitee.io/case/JavaScript/21.animate/test.html)

调用animate.js代码案例。

[导航栏交互动画效果案例](https://sumsu.gitee.io/case/JavaScript/21.animate/nav.html)

导航栏交互动画效果案例。

[22.轮播图案例](https://sumsu.gitee.io/case/JavaScript/22.focus/index.html)

单个轮播图效果实现案例。

[带有动画效果的返回顶部案例](https://sumsu.gitee.io/case/JavaScript/21.animate/goback.html)

回到顶部缓动动画案例。


[23.拖动元素案例](https://sumsu.gitee.io/case/JavaScript/23.拖动元素案例/goback.html)

移动端触摸拖动元素案例。


[24.移动端轮播图制作](https://sumsu.gitee.io/case/JavaScript/24.移动端轮播图制作/index.html)

移动端轮播图制作案例。

[25.返回顶部](https://sumsu.gitee.io/case/JavaScript/25.返回顶部/index.html)

下拉滚轮显示返回顶部按钮，返回顶部按钮带缓动效果。

[26.新浪下拉菜单案例-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/1.sina.html)

利用jQuery实现新浪下拉菜单导航栏案例。

[26.淘宝服饰精品案例-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/2.taobao.html)

利用jQuery排他思想快速制作切换商品图案例。

[26.Tab栏切换案例-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/3.tab.html)

利用jQuery实现Tab栏切换案例。

[26.动画滑动效果-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/4.slide.html)

jQuery快速实现动画效果案例。

[26.新浪下拉菜单-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/5.sina.html)

事件切换的运用，实现鼠标经过时，显示与隐藏。

[fade效果示例-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/6.fade.html)
fade动画效果示例。

[26.animate-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/7.animate.html)
animate使用示例。

[26.带有动画的返回顶部-jQuery](https://sumsu.gitee.io/case/JavaScript/26.jQuery/8.backTop.html)

带有动画的返回顶部效果。

[27.手风琴效果](https://sumsu.gitee.io/case/JavaScript/27.手风琴效果/index.html)

利用jQuery提供的淡入淡出效果制作手风琴效果。

[28.购物车案例](https://sumsu.gitee.io/case/JavaScript/28.购物车案例/index.html)

利用jQuery实现复选框及全选框勾选及取消勾选功能。

[29.电梯导航栏-jQuery](https://sumsu.gitee.io/case/JavaScript/29.电梯导航/index.html)

固定电梯导航栏功能实现案例。

[30.发布删除微博-jQuery](https://sumsu.gitee.io/case/JavaScript/30.发布删除微博/index.html)

发布删除微博案例。

[31.todolist-jQuery](https://sumsu.gitee.io/case/JavaScript/31.todolist/index.html)

待办清单ToDoList案例。



## JavaScript Advanced

[32.商品查询案例](https://sumsu.gitee.io/case/JavaScript/32.商品查询案例/index.html)

ES5中新方法fliter()、forEach()、some()的筛选方法案例。

[33.面对对象Tab案例](https://sumsu.gitee.io/case/JavaScript/33.面对对象Tab案例/index.html)

面对对象编程实现Tab四个功能(切换tab、添加tab、删除tab、双击修改tab)案例