2017-7-19

作者: 毛毛i | 来源:发表于2017-07-19 21:37 被阅读0次

    收获到了什么?

    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

    相关文章

      网友评论

          本文标题:2017-7-19

          本文链接:https://www.haomeiwen.com/subject/scsrkxtx.html