首页js效果过度结束事件学习笔记思维导图

首页js效果过度结束事件学习笔记完整版分享！内容覆盖首页js效果、过度结束事件、移动端特有事件，帮助大家快速掌握js知识。

首页js效果过度结束事件学习笔记思维导图

• 首页js效果
  • 顶部通栏渐变色
  • 倒计时
    • 先获取一些必须的元素
    • 一秒执行一次代码(定时器)
    • 易错点
      • dom元素修改文本质 需要.innerHTML
      • 时分秒的 十位数 记得 取整 否则 显示的是小数
      • 倒计时到0的时候, 将定时器干掉,避免出现负数的问题
  • 轮播图
    • 自动轮播
      • 定义index 记录索引值
      • 获取一些必须要知道的变量
        • 单个元素宽度
        • 轮播图的ul(很长的ul)
        • 索引的ul的li (li 数组)
      • 定时器
        • index++
        • 修改ul位置
      • 过度结束事件
        • 判断index的值是否有效,并修正
          • 如果越界就关闭过渡,并瞬间跳回第一张
        • 修改索引li标签的显示
    • 手指拨动 轮播
      • 通过touch事件去修改位置
      • touchend中 会开启过渡 通过过渡完成 吸附效果
  • 实际开发中页面数据的获取
    • 如果是一个 动态网站(基本上现在的所有网站都是动态的)
      • 页面中的内容是动态生成的
        • 比如img的src属性
        • a标签的文本质
        • 页面的布局效果等等
    • 不刷新页面获取新数据
      • ajax的技术
        • 发送请求即可
        • 在什么情况下发请求
          • 点击加载更多
            • 点击发送ajax
          • 滚动加载更多
            • 滚动发送ajax
          • 失去焦点验证用户名
            • 失去焦点事件发送ajax
        • 什么时候ajax获取数据 在公司中 是有 产品经理
          • 设计页面的 大体布局以及交互效果
          • 很容易跟 美工以及程序 冲突
• 过度结束事件
  • 需要使用 addEventListener的方式添加
  • 默认的方法名为transitionEnd
  • 由于浏览器兼容性问题 可能需要添加前缀
    • webkitTransitionEnd
    • mozTransitionEnd
    • msTransitionEnd
    • oTransitionEnd
• 移动端特有事件
  • touch
    • touchstart
      • 事件参数中 有 触摸点的值
    • touchmove
      • 事件参数中 有 触摸点的值
    • touchend
      • 事件参数中 没有触摸点的值
    • 注意:不能通过dom.ontouchstart的方式去绑定
    • 只能addEventListener的方式进行绑定
    • 只在移动设备上支持
  • 常见的封装
    • 左滑,右滑
    • 长按
    • 捏合
    • 等等这些事件 都是基于 touch三个事件的封装