实现一个很实用的页面引导功能

chuyao 发布于2019-08-20 18:36 / 578人阅读

摘要：先上图项目地址演示源码功能说明添加一个引导层对用户进行操作引导使用参数说明步奏图层的层次可选默认目标选择器必填引导图片必填延时时间可选轮询查询目标次数计算及显示引导图之前的钩子可选引导图片的位置修正函数可选默认与目标左上

先上图

项目地址

演示
源码

功能说明

添加一个引导层对用户进行操作引导

使用

new Guide([
    {
      selector: "#t1",
      src: "img/pic-1.png",
      delay: 500,
      before: function (done) {
        done()
      },
      handler: function (el, img, option) {
        return {
          x: -img.width + el.offsetWidth + (img.height - el.offsetWidth) / 2,
          y: -(img.height - el.offsetHeight) / 2
        }
      }
    },
    {
      selector: "#t2",
      src: "img/pic-1.png",
      handler: function (el, img, option) {
        return {
          x: -img.width + el.offsetWidth + (img.height - el.offsetWidth) / 2,
          y: -(img.height - el.offsetHeight) / 2
        }
      }
    }
  ], 9999)

参数说明

/*
 * @params steps: 步奏
 * @params zIndex: 图层的层次（可选,默认 99999）
 * 
Guide(Array: steps, Number?: zIndex)

interface Step {
    // 目标选择器(必填)
    String: selector
    // 引导图片(必填)
    String: src
    // 延时时间(可选)
    Number?: delay
    // 轮询查询目标次数
    Number?: repeat
    // 计算及显示引导图之前的钩子(可选)
    Function?: before(Function: done)
    // 引导图片的位置修正函数(可选,默认与目标左上对齐)
    Function?: handler(Element:el, ImgElement: img, Object: option)    
}

实现功能说明

实现逻辑

根据steps异步加载所有src

添加页面元素canvas并设置当前步骤

获取页面高宽并清除click事件

轮询selector直到repeat之前获取到对象

延迟delay时间

执行before

根据handler在canvas上绘制背景及图片位置

添加click事件

设置当前步骤为下一个step，重复2-9步骤直到steps为空

不太会写文章，希望源码和这些简介对你有帮助，如果喜欢给个赞

云服务器 GPU云服务器关于页面弹框功能实现实用功能 asp功能的实现 php发帖功能的实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84738.html

javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0