2023-5-24(第十六天)

138 阅读1分钟

animate动画库

使用步骤:

  1. 到官网选择动画
  2. 引入animate.css文件
  3. 将选择的动画的class名放到页面元素上
  4. 设置animation-duration(执行时长)
  5. 根据需求设置不同的初始效果

无缝轮播

基本思路:

  1. 淡入淡出轮播图的升级版,不再用显示隐藏,而是通过定位达到切换的效果
  2. 分别给点击左键和点击右键的备选照片设置不同的定位位置
  3. 点击时,两张照片位置同时发生改变
  4. 为了不消耗内存,设置定时器将照片从DOM树上删除
  5. 小圆点的方向感可以通过上一次出现的照片的下标跟本次点击的照片的下标进行比较

swiper插件(专门的轮播插件)

使用步骤:

  1. 下载文件,引入js和css文件
  2. 选择轮播图效果
  3. 查看源代码,复制对应的样式、HTML代码、JS代码

封装一个运动(动画)函数

百度/高德地图

使用步骤:

  1. 进入百度地图开放平台
  2. 注册成为开发者
  3. 创建浏览器端应用,白名单写*------>获取密钥
  4. 导航条----->JavaScript API------>示例DEMO
  5. 百度地图有GL地图和普通地图两种版本,两者不可以混搭使用