js下 Day12、案例
一.垃圾分类
效果图:
功能思路分析:
1. 鼠标按下
(1) 获取鼠标到元素的距离(e.offsetX)
(2) 开启开关变量
(3) 获取事件源
(4) 记录垃圾初始位置
2. 鼠标移动
(1) 当开关变量为真时,修改垃圾的位置即的left和top
(2) 垃圾位置 = 鼠标位置到页面位置 - 鼠标到盒子的位置
3. 鼠标抬起
(1) 关闭开关变量
(2) 循环每一个垃圾桶,通过 getBoundingClientRect()方法获取垃圾桶的四个边界,判断鼠标是否进入垃圾桶
(3) 如果进入垃圾桶,再利用indexOf()检测垃圾和垃圾桶的title值
(4) 为真则删除垃圾,为假则回到原地( 鼠标按下时记录的初始位置 )
#二.仿苹果菜单
效果图:
功能思路分析:
1. 封装获取两点之间距离方法
(1) 利用勾股定理求斜边: 直角边的平方和 = 斜边的平方
(2) 求平方用Math.pow( a,2) , 开根号用Math.sqrt(c)
2. 封装获取元素中心点方法
(1) 通过getBoundingClientRect()方法拿到元素的位置尺寸信息
(2) 中心点:即 元素的left + 元素的width/2
3. 图标放大
(1) 循环每一个图标,调用imgCenter()方法拿到每一个图标的中心点
(2) 调用getPos()方法获取鼠标到图片中心点的距离
(3) 设置一个临界点,当两点之间的距离小于临界点时,图片开始放大
(4) 图标放大即修改图标的宽度,在初始宽度的基础上放大
#三.今日小结
1.获取元素的尺寸和位置信息:元素. getBoundingClientRect()
2.勾股定理: 直角边的平方 = 斜边的平方
3.开方Math.pow(值,次方)
4.开根号Math.sqrt(值)
#四.作业--选项卡三级联动
效果图:
功能要求:
1. 渲染省份
(1) 对象的数据用for in,渲染时在标签中设置自定义属性保存编码
2. 渲染城市
(1) 点击省份渲染城市,拿到标签上的编码,通过**【】方式取数据**
(2) 对象的数据用for in,渲染时在标签中设置自定义属性保存编码
3. 渲染区县
(1) 点击城市渲染城市,拿到标签上的编码,通过**【】方式取数据**
4. 选项卡切换
(1) 点击菜单,切换菜单类名和对应省市区的类名进行显示隐藏
最新文章
- 在Application中集成Microsoft Translator服务之使用http获取服务
- Excel 函数VLOOKUP初学者使用指南
- 16个基本颜色关键字 Basic color keywords
- java设计模式(二)---工厂方法模式
- 构建 ARM Linux 4.7.3 嵌入式开发环境 —— BusyBox 构建 RootFS
- Vex – 超轻量!可以轻松自定义的现代风格弹窗插件
- C# CRC32
- C#如何使用和开发自定义配置节
- Javase中多态polymorphic的简单介绍
- Amzon MWS API开发之 请求报告
- K3 WISE 开发插件《K3 WISE常用数据表整理》
- DirectX11 With Windows SDK--22 立方体映射:静态天空盒的读取与实现
- windows 7中的windows键相关的快捷键
- 【MySql】Group By数据分组
- 图像的几何变换——OpenCV-Python Tutorials
- SSO单点登录_理解
- vue+element之多表单验证
- NDK 开发实例一(Android.mk环境配置下)
- 关于“UI线程”
- Shiro ini配置