收获到了什么?
1.弹出层的拖曳效果
- 先写click事件,获取鼠标在页面的X坐标和Y坐标。获取元素距离页面左边的距离和上边的距离,用获取的坐标减去获取的距离,
求出鼠标在div区域里点击的坐标。
- 然后写mousemove事件,获取鼠标在页面的坐标,减去刚才获取的区域坐标,让div的坐标等于区域坐标
- 设置范围,鼠标坐标不能为负数,如果为负数,那么强制坐标等于0;获取页面宽度和高度,鼠标坐标不能超过这个宽度和高度,如果超过,强制等于页
面的宽和高
- 最后写mouseup事件,mousemove = null,mouseup = null;
- offsetLeft 元素距离窗口左边的距离 `元素.offsetLeft`
- offsetTop 元素距离窗口顶部的距离 `元素.offsetTop`
- offsetWidth 元素的宽度 `元素.offsetWidth`
- offsetHeight 元素的高度 `元素.offsetHeight`
- clientWidth 窗口的宽度 `document.documentElement.clientWidth`
- clientHeight 窗口的高度 `document.documentElement.clientHeight`
##### 2.浏览器的开发者工具
- 测试HTML、CSS
- 测试JavaScript
- 模拟移动端
- 模拟移动端网速
# 感受和想法?
挺难的,看教程看了两边才听懂,不过做出来挺有成就感的。
# 明天的打算?
- 复习今天的小项目
- 继续了解GetHub
- 项目还有下拉框没有完成
- 项目不支持IE8
网友评论