一.元素尺寸信息

元素.offsetWidth: 元素的外宽高 width + padding + border

元素.offsetHeight: 元素的外宽高 height + padding + border

元素.clientWidth: 元素的内宽高 width + padding

元素.clientHeight: 元素的内宽高 height+ padding

元素.offsetLeft: 相对于定位父元素左则的距离

元素.offsetTop: 相对于定位父元素顶部的距离

window.innerWidth: 浏览器的宽高(包含滚动条)

window.innerHeight: 浏览器显示窗口的当前高(包含滚动条)

document.documentElement.clientWidth || document.body.clientWidth

浏览器的宽高(不包含滚动条)

浏览器显示窗口的内容区宽高

document.documentElement.scrollWidth || document.body.scrollHidth

浏览器的滑动条距离;

document.document.scrollTop || document.body.scrollTop 滚动条滚动距离

#二.事件对象相关位置方法

鼠标距离盒子左上的位置: e.offsetX e.offsetY

鼠标相对于浏览器的位置: e.clientX e.clientY

鼠标相对于页面的位置: e.pageX e.pageY

#三.案例

#1. 单个盒子拖拽

效果图:

img

功能思路分析:

按下盒子,盒子才能拖。盒子跟随鼠标移动,盒子移动即修改盒子的left和top。松开鼠标停止拖拽。

功能一: 鼠标按下开起拖拽

\1. 给要拖拽的元素绑定鼠标按下事件( mousedown )

\2. 记录鼠标到盒子的距离**(e.offsetX e.offsetY)**

\3. 开启控制盒子移动的变量 ( flag = true )

功能二: 鼠标移动盒子移动

\1. 给document绑定**鼠标移动事件 (mousemove),**开关变量为真时移动盒子

\2. 盒子位置 = 鼠标到页面的距离( e.pageX ) - 鼠标到盒子的距离( pos.x )

\3. 范围判断: 最小为0; 最大 = 页面的宽 - 盒子的宽

\4. 修改盒子的left 和 top

功能三: 鼠标松开停止拖拽

松开鼠标时关闭开关变量

#2. 图标回收站

效果图:

功能思路分析:

功能一:图标拖拽

\1. 多个图标通过事件委托绑定鼠标按下事件

\2. 鼠标按下开启拖拽开关( flag = true ),记录鼠标到图标的距离(e.offsetX e.offsetY ),记录事件源(e.target) 。

\3. 图标跟随鼠标移动,给document绑定鼠标移动事件mousemove,当开关变量为真时移动盒子。

功能二:图标回收

\1. 当鼠标松开时,关闭拖拽开关

\2. 边界判断: 图标进入回收站则删除图标,并计数

#四.今日小结

1.元素的外宽高: 元素.offsetWidth 元素.offsetHeight

2.元素的内宽高: 元素.clientWidth 元素.clientHeight

3.元素相对于定位父元素距离: 元素.offsetLeft 元素.offsetTop

4.鼠标相对于元素位置: e.offsetX e.offsetY

5.鼠标相对于窗口位置: e.clientX e.clientY

6.鼠标相对于页面位置: e.pageX e.pageY

7.浏览器窗口大小:

document.documentElement.clientWidth || document.body.clientWidth

8.滚动距离:

document.documentElement.scrollTop || document.body.scrollTop

#五.作业 -- 成绩分类

效果图:

img

功能思路分析:

1. 成绩标签拖拽

\1. 利用事件委托将左侧的成绩标签实现拖拽

\2. 给成绩大盒子绑定鼠标按下事件,判断事件源

\3. 给document绑定鼠标移动事件,成绩标签跟随鼠标移动

2. 指定边界判断

\1. 给document绑定鼠标松开事件,松开时判断鼠标位置

\2. 当鼠标进入成才盒子,再判断成绩,合格则放入;当鼠标进入不成才盒子,不合格则放入。否则回到原地

js下 Day10、尺寸位置属性的更多相关文章

  1. js,jq获取元素位置属性及兼容性写法

    网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop   //ie,谷歌浏览器和没有 ...

  2. three.js 相机camera位置属性设置详解

    开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸❓❓❓] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置x ...

  3. JS Div滚动,下拉框添加属性,年月日下拉条

    创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...

  4. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  5. Swift下的基于UIView的位置属性扩展

    一个比较简单能满足大部分需求的extensin,如下: swift 的基于UIView的位置属性 包含: 上下左右:left.right.top.botom 高宽:height.width 中心点:c ...

  6. js中scrollLeft、scrollWidth、offsetTop等相关位置属性的理解(转)

    1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6.IE7.IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意:在opera.IE6.IE7 ...

  7. Python全栈开发之路 【第十七篇】:jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. JQuery框架2.位置属性|筛选方法|事件

    1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...

  9. 前端开发之jQuery位置属性和筛选方法

    主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 ...

随机推荐

  1. jsp跳转不成功,服务器也不报错,登录页面点击登录没反应,代码如下,请韭菜园子的工友给予指导!

    登录后.. 根本跳不到这个检查页面.. 这个登录成功页面也就无从谈起了!

  2. centos8 连接wifi

    从官网下载的6G多的iso安装后 #ifconfig -a 如下 enp3s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500l ...

  3. 企业级工作流解决方案(十四)--集成Abp和ng-alain--自动化脚本

    对于.net方向,做过自动化的,应该没有人不熟悉msbuild吧,非常强大的代码编译工具,.net平台的编译工作都是交给他来完成的,包括.net core的命令,本质上都是调用msbuild来执行的 ...

  4. 分布式监控系统之Zabbix 使用SNMP、JMX信道采集数据

    前文我们了解了zabbix的被动.主动以及web监控相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14024212.html:今天我们来了解下zabb ...

  5. 「CSP-S 2019」划分

    description loj 3212 solution 首先容易想到\(n^3\)DP,即令\(f_{i,j}\)表示前\(i\)个数的划分,其中最后一段是从\(j\)开始时的答案 于是有 \[f ...

  6. Ⅶ. Policy Gradient Methods

    Dictum:  Life is just a series of trying to make up your mind. -- T. Fuller 不同于近似价值函数并以此计算确定性的策略的基于价 ...

  7. leetcode133. 克隆图

    给定无向连通图中一个节点的引用,返回该图的深拷贝(克隆).图中的每个节点都包含它的值 val(Int) 和其邻居的列表(list[Node]).示例: 输入:{"$id":&quo ...

  8. testlink——解决测试度量与报告或图表中中文显示乱码问题

    解决问题之前的图表: 解决方法: (1)下载SimHei.TTF字体(可以在自己电脑的C:/windows/fonts目录下找到,若找不到,可以在网上下载) (2)将SimHei.TTF文件拷贝到te ...

  9. 最佳置换算法OPT

    原文链接:https://www.jianshu.com/p/544ee20e307c

  10. CentOS7.X 挂载磁盘 与Mysql 自动备份

    1.前言 搞了好几天终于弄了出来,简单记录一下.注意以下教程是在测试服务器基础上编写 如数据盘含有数据切勿使用此教程,如对命令行不熟悉的 不建议搞哈 .本文中的磁盘/dev/sdb为笔者测试服务器上的 ...