js下 Day10、尺寸位置属性
一.元素尺寸信息
元素.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. 单个盒子拖拽
效果图:
功能思路分析:
按下盒子,盒子才能拖。盒子跟随鼠标移动,盒子移动即修改盒子的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
#五.作业 -- 成绩分类
效果图:
功能思路分析:
1. 成绩标签拖拽
\1. 利用事件委托将左侧的成绩标签实现拖拽
\2. 给成绩大盒子绑定鼠标按下事件,判断事件源
\3. 给document绑定鼠标移动事件,成绩标签跟随鼠标移动
2. 指定边界判断
\1. 给document绑定鼠标松开事件,松开时判断鼠标位置
\2. 当鼠标进入成才盒子,再判断成绩,合格则放入;当鼠标进入不成才盒子,不合格则放入。否则回到原地
最新文章
- jcaptcha sample 制作验证码
- FUND
- 运用DebugDiag诊断ASP.Net异常
- KendoUI系列:TabStrip
- HTTP协议学习---(十)拓展-HTTPS协议
- yield和python(如何生成斐波那契數列)
- 最常用的PHP正则表达式收集整理
- mysql复制的配置
- Wildcard Matching
- AIR串口通信
- 一个简单的Android小实例
- yii2源码学习笔记(二十)
- mysql主从监控
- php 链接中加参数传递
- 解析:type t_string is table of varchar2(32767) index by binary_integer
- AndroidManifest设置android:allowBackup=";false";报错
- HDU-problem-1002-人类史上最大最好的希望事件-矩阵快速幂
- Bitmap压缩图片
- Python基础知识:模块
- [No0000159]C# 7 中的模范和实践
热门文章
- springboot中aop的使用
- IntelliJ IDEA 2019.1.3 x64 简约基本配置
- ";三剑客";之awk心中无剑
- 深度分析:mybatis的底层实现原理,看完你学会了吗?
- On Starting My Blogging On CNBlogs
- ABBYY FineReader添加盖章戳记
- FL Studio 插件使用技巧——Fruity Reeverb 2 (上)
- CorelDRAW 2017提示已安装另一版本导致安装失败的解决办法
- 「CSP-S 2019」划分
- 2. 三数之和(数组、hashset)