一.成绩分类

效果图:

功能思路分析:

1. 渲染数据

2. 鼠标按下开启拖拽

\1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽

\2. 开启控制拖拽的变量

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

\4. 获取事件源

\5. 克隆一个副本,设置定位,放到成绩盒子中

3. 鼠标移动-副本跟随

\1. 当开关变量为真时移动盒子

\2. 克隆盒子位置 = 鼠标到页面的距离 - 鼠标到元素的距离

4. 鼠标松开-边界判断

\1. 判断克隆元素是否存在,不存在则直接return

img

\2. 使用**getBoundingClientRect()**方法,获取成才盒子和不成才盒子的上下左右边界值

\3. 判断两个成绩是否都大于90,是则进行成才盒子边界判断。当鼠标进入指定区域则:**将事件源添加到成才盒子,删除克隆副本;**当鼠标没有进入范围则:删除克隆副本

\4. 未成才盒子判断同理

#二.放大镜

效果图:

功能思路分析:

1. 鼠标滑入小盒子=> 显示遮罩和大盒子

2. 鼠标移动 => 遮罩移动 大图移动

3. 鼠标离开 => 隐藏遮罩 隐藏大盒子

#三.今日小结

\1. 拖拽固定三步: 鼠标按下mousedown 鼠标移动mousemove 鼠标抬起mouseup

\2. 获取元素尺寸定位信息: 元素.getBoundingClientRect()

\3. 克隆元素: cloneNode(true)

\4. 节点添加删除: appendChild() removeChild()

#四.作业 -- 垃圾分类

效果图:

垃圾分类作业要求:

\1. 将垃圾拖拽到垃圾桶内

\2. 进入到垃圾桶后判断是否分类正确:错误提示“分类错误,罚款50”,正确“优秀公民,棒棒嗒”。( 根据图片的title标签提示内容判断 )

注意:移动图片时有默认形为,需要取消掉(e.preventDefault())

js下 Day11、案例的更多相关文章

  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. Linux Command Line_1_Shell基础

      引言 图形用户界面(GUI)让简单的任务更容易完成,命令行界面(CLI)使完成复杂的任务成为可能. 第一部分:Shell 本部分包括命令行基本语言,命令组成结构,文件系统浏览.编写命令行.查找命令 ...

  2. linux中的fork炸弹

    学习bash脚本看到一段代码(老鸟应该知道)挺有意思,一时看不懂.该命令不需要管理员即可运行,请不要在你的机器上使用以下脚本,否则你知道你在干什么 :() { :|: & };: 参考链接:h ...

  3. 如何将各种音频视频素材导入Vegas?

    使用vegas制作视频时,我们经常需要将音频和视频素材导入到媒体库中,以此来达到完美的视听结合效果.其实vegas导入素材并不难,因此很多有剪辑经验的朋友完全可以不用看下去了,主要是纯小白自学视频剪辑 ...

  4. FL Studio通道常规设置

    每个通道设置窗口都包含声相.音量.音高和混音音轨等.刚学习FL Studio的同学可能对这些旋钮的功能还不是很了解,所以也就直接导致了不能很好的运用.为了帮助同学进一步熟悉这款软件,小编今天将为大家详 ...

  5. FL studio系列教程(三):如何用FL Studio做电音

    电音制作,自然少不了适合做电音的软件,市面上可以进行电音制作的软件不少,可是如果在这些软件中只能选择一款的话,想必多数人会把票投给FL Studio,毕竟高效率是永远不变的真理,今天就让我们来看看如何 ...

  6. SFTP 连接服务器下载文件方法采坑说明

    本篇博客主要记录请求SFTP服务器的一些方法采坑情况. 采坑的方法说明: 1. cd():这个方法用于进入某个目录下. 默认情况,当连接SFTP服务器成功后直接进入用户目录,比如我连接自己本机SFTP ...

  7. JUC并发工具包之CyclicBarrier

    1.简介 CyclicBarrier是一个同步器,允许多个线程等待彼此直到达一个执行点(barrier). CyclicBarrier都是在多个线程必须等到彼此都到达同一个执行点后才执行一段逻辑时才被 ...

  8. pytest参数化

    Pytest可以在多个级别上实现测试参数化 一.@pytest.fixture装饰器调用参数 示例 import pytest from selenium import webdriver from ...

  9. pytest测试框架入门

    安装pytest 命令行输入: pip install -U pytest 检查是否安装了正确的版本: λ pytest --version This is pytest version 5.3.5, ...

  10. uniapp分包(详尽版)

    PS:本文是笔者对基于uniapp的一小程序项目进行分包后的复盘文档,不足之处请多多指教. 一:分包相关概念 本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术. 主包与分包的概念 1 ...