经济寒冬下的硬实力:高效便捷的工作流程引导工具

妙味周三直播课:

18年12月26日,晚 8 点

《高效便捷的工作流程引导工具》

免费报名地址:

https://ke.qq.com/course/178139


前置知识点

CSS3 部分:

  • transition
  • 2D 变换

JavaScript 部分:

  • 事件对象

注意:

  • 前置视频非常重要!!!如果没有前端视频的小伙伴,请在下面留言,然后 找客服索要即可,如:

本节课知识点

  • CSS3:

    1. transform-origin 变换原点
    2. 变换原点相对于变换元素的左上角进行坐标计算
  • JavaScript 性能提升:

    1. 函数节流
    2. 为什么使用函数节流
    3. 函数节流的基本实现
    4. 本质: 函数执行后返回另一个函数
    5. 实现: 定时器管理 + 流程控制
    6. 如何使用函数节流
    7. 事件委托
    8. 只要监听父级上的事件
    9. event.target: 事件源
    10. 利用不同的事件源做不同的事情

实现思路

  1. 1) 屏幕内容移动和缩放
  2. 使用 transform 变换进行移动
  3. 记录按下和移动的手指位置
  4. 修改元素位置
  5. 配合 transform-origin 进行缩放
  6. 在每次移动都要修改基点位置
  7. 2) 滑块控制缩放
  8. 处理最大值和最小值限制
  9. 初始化滑块,设置参数实现
  10. 对滑块方向进行修改
  11. 3) 双击屏幕实现最大化和最小化
  12. 判断当前状态,再进行最大化或者最小化
  13. 只要当前不是最小状态,就进行最大化
  14. 否则,进行最小化
  15. 双击之后,同步滑块的值和位置
  16. 4) 添加元素和删除元素
  17. 获取遮罩弹层中的文字内容
  18. 使用节点操作进行子项的添加和删除
  19. 处理需要删除的箭头线段
  20. 如果要删除的元素上方有箭头,则删除上方箭头,
  21. 否则,如果要删除的元素下方有箭头,则删除下方箭头
  22. 删除之后,还原最后一个子项的底部添加按钮

课后拓展作业:

  • 添加更多的类型子项
  • 实现相对更加完整的脑图功能

特别提醒:

1、如有相关技术问题,欢迎留言提问,我们会认真回复每一条留言滴,如:

2、如果,你有事错过了 “周三直播课之夜”,错过了直播现场最宝贵的 “精彩互动”,贴心的小编也为你准备了 “回放视频及源码课件” ,你只需要在本帖下留言,就能找妙味的客服小姐姐去要啦~

注:资料整理需要几天时间,所以想要第一时间学习的小伙伴们,最好还是来参加直播课吧~

免费报名地址:

https://ke.qq.com/course/178139


本课知识点来源于:

《2019 新番:JS 全栈高级工程师课程》

精彩课程介绍:
https://www.miaov.com/index.php/news/newsDetail/nid/386


课程咨询:

  • 咨询 QQ:2852509866、2852509868
  • 微信咨询:miaov-class、miaov-study
妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部