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) 点击菜单,切换菜单类名和对应省市区的类名进行显示隐藏
js下 Day12、案例的更多相关文章
- 原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
- js下拉框
Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html
- chart.js图表库案例赏析,饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 小议 js 下字符串比较大小
原文:小议 js 下字符串比较大小 之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是 直接比较,如: var a = "2 ...
- node.js 下依赖Express 实现post 4种方式提交参数
上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...
- npm 是node.js下带的一个包管理工具
npm 是node.js下带的一个包管理工具 npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...
- js调用ajax案例
js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...
- cookie.js插件的案例
cookie.js插件的案例: https://github.com/jaywcjlove/cookie.js/blob/master/README.md 文档 api 在这里即可查看用法 ...
随机推荐
- 面试官:小伙子,你给我讲一下java类加载机制和内存模型吧
类加载机制 虚拟机把描述类的数据从 Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制. 类的生命周期 加载(Loadi ...
- 已安装的nginx添加其他模块
总体操作就是添加新模块并重新编译源码,然后把编译后的nginx可执行文件覆盖原来的那个即可.1 查看已安装的参数nginx -V拷贝那些巴拉巴拉的参数,后面编译的时候使用 2 下载相同版本号的源码,解 ...
- 「CSP-S 2019」Emiya 家今天的饭
description loj 3211 solution 看到题目中要求每种主要食材至多在一半的菜中被使用,容易想到补集转换. 即\(ans=\)总方案数-存在某一种食材在一半以上的菜中被使用的方案 ...
- 精尽MyBatis源码分析 - SQL执行过程(三)之 ResultSetHandler
该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...
- leetcode116. 填充每个节点的下一个右侧指针
给定一个完美二叉树,其所有叶子节点都在同一层,每个父节点都有两个子节点.二叉树定义如下:struct Node { int val; Node *left; Node *right; Node ...
- 牛客练习赛67 D牛妹爱数列 题解(dp)
题目链接 题目大意 给你一个长为n的01串,要你进行最少的操作使得这01串变成全为0,求最少操作次数 有两种不同类型的操作 1:翻转一个前缀 2:单调翻转一个元素 题目思路 居然是一个dp,标程讲的很 ...
- 蒲公英 · JELLY技术周刊 Vol.32: 前端的自我进化之路
蒲公英 · JELLY技术周刊 Vol.32 前端开发不过是切图仔在那儿瞎鼓捣,没啥门槛,不需要懂计算机原理,不需要懂算法,微服务.高并发这些都不需要懂,拖组件写个页面就好了,数据.逻辑.测试都可以交 ...
- 微信小程序 下拉刷新
<scroll-view class='scroll-view-container' scroll-y="true" bindscrolltolower='scrollToL ...
- select标签
select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...
- nodejs事件和事件循环简介
目录 简介 事件 事件循环 事件循环的阻塞 事件循环举例 栈和消息队列 作业队列和promise process.nextTick() setImmediate() setInterval() 简介 ...