2017-7-19

收获到了什么?

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容