一.垃圾分类

效果图:

功能思路分析:

1. 鼠标按下

(1) 获取鼠标到元素的距离(e.offsetX)

(2) 开启开关变量

(3) 获取事件源

(4) 记录垃圾初始位置

​ 

2. 鼠标移动

(1) 当开关变量为真时,修改垃圾的位置即的left和top

(2) 垃圾位置 = 鼠标位置到页面位置 - 鼠标到盒子的位置

3. 鼠标抬起

(1) 关闭开关变量

(2) 循环每一个垃圾桶,通过 getBoundingClientRect()方法获取垃圾桶的四个边界,判断鼠标是否进入垃圾桶

(3) 如果进入垃圾桶,再利用indexOf()检测垃圾和垃圾桶的title值

(4) 为真则删除垃圾,为假则回到原地( 鼠标按下时记录的初始位置 )

#二.仿苹果菜单

效果图:

img

功能思路分析:

1. 封装获取两点之间距离方法

img

(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、案例的更多相关文章

  1. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

  2. js下拉框

    Js下拉框   http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html

  3. chart.js图表库案例赏析,饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  4. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  5. 小议 js 下字符串比较大小

    原文:小议 js 下字符串比较大小 之前群里有人问如何比较两个时间大小,他的时间格式是 2014-08-08 而不是 2014-8-8.所以我给的方法是 直接比较,如: var a = "2 ...

  6. node.js 下依赖Express 实现post 4种方式提交参数

    上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...

  7. npm 是node.js下带的一个包管理工具

    npm 是node.js下带的一个包管理工具          npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...

  8. js调用ajax案例

    js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...

  9. cookie.js插件的案例

    cookie.js插件的案例: https://github.com/jaywcjlove/cookie.js/blob/master/README.md    文档  api   在这里即可查看用法 ...

随机推荐

  1. 面试官:小伙子,你给我讲一下java类加载机制和内存模型吧

    类加载机制 虚拟机把描述类的数据从 Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的java类型,这就是虚拟机的类加载机制. 类的生命周期 加载(Loadi ...

  2. 已安装的nginx添加其他模块

    总体操作就是添加新模块并重新编译源码,然后把编译后的nginx可执行文件覆盖原来的那个即可.1 查看已安装的参数nginx -V拷贝那些巴拉巴拉的参数,后面编译的时候使用 2 下载相同版本号的源码,解 ...

  3. 「CSP-S 2019」Emiya 家今天的饭

    description loj 3211 solution 看到题目中要求每种主要食材至多在一半的菜中被使用,容易想到补集转换. 即\(ans=\)总方案数-存在某一种食材在一半以上的菜中被使用的方案 ...

  4. 精尽MyBatis源码分析 - SQL执行过程(三)之 ResultSetHandler

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  5. leetcode116. 填充每个节点的下一个右侧指针

    给定一个完美二叉树,其所有叶子节点都在同一层,每个父节点都有两个子节点.二叉树定义如下:struct Node {  int val;  Node *left;  Node *right;  Node ...

  6. 牛客练习赛67 D牛妹爱数列 题解(dp)

    题目链接 题目大意 给你一个长为n的01串,要你进行最少的操作使得这01串变成全为0,求最少操作次数 有两种不同类型的操作 1:翻转一个前缀 2:单调翻转一个元素 题目思路 居然是一个dp,标程讲的很 ...

  7. 蒲公英 · JELLY技术周刊 Vol.32: 前端的自我进化之路

    蒲公英 · JELLY技术周刊 Vol.32 前端开发不过是切图仔在那儿瞎鼓捣,没啥门槛,不需要懂计算机原理,不需要懂算法,微服务.高并发这些都不需要懂,拖组件写个页面就好了,数据.逻辑.测试都可以交 ...

  8. 微信小程序 下拉刷新

    <scroll-view class='scroll-view-container' scroll-y="true" bindscrolltolower='scrollToL ...

  9. select标签

    select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...

  10. nodejs事件和事件循环简介

    目录 简介 事件 事件循环 事件循环的阻塞 事件循环举例 栈和消息队列 作业队列和promise process.nextTick() setImmediate() setInterval() 简介 ...