実用的なページブート機能を実現

先に図をとる
プロジェクトアドレス
デモンストレーションソース
機能の説明
ユーザーを操作するためのブート・レイヤの追加
使用

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イベント

をクリア

は、repeatの前にオブジェクト

を取得するまでselectorをポーリングする.

遅延delay時間

before

を実行

handlerに従ってcanvas上に背景およびピクチャ位置

を描画する.

clickイベント

を追加

現在のステップを次のstepに設定し、stepsが空の

になるまで2-9のステップを繰り返します.
あまり文章を書くことができなくて、ソースコードとこれらのプロフィールがあなたに役に立つことを望んで、もし良いことが好きならば