効果ガイドPage [元]を達成するために、ウェブ（PC）

序文

同社の公式サイトの会員ページのナビゲーションメニューあまりにも、あなたは、ガイドのページ（またはあなたが登録した後、会員センターに初めてログイン）を追加する必要があります。百度の単純な実装についての思考を開始するには（私は背景をしていた、結果を変更するための変更へのフロントページにはOK、手で行うことが少し困難であった）、および適切な効果を見つけられませんでした、サンプルコードでは、（完全に理解していない混沌提供しました一種）。

自分のためにかわすために。その後、分析イントロ効果、より全画面表示よりも何も、隠されたガイドページの終わりを示す、ブーツ、次のページのうち、ガイドページをクリックしてください。

当初使用swiperに、カルーセル案内されたページの全画面表示にではなく、ページのために良いのボタンを上下してブートページを隠すの最終効果を達成するために、耳を傾けてみたかったです。

、自分でHTML構造を構築イントロ画像を表示し、適切なボタンの位置を追加し、ボタンのクリックイベントを設定することができます。

実現

htmlの一部

< UL クラス= "guide_imgs" > 
    < リチウムのクラス= "クローズ" > </ 李> 
    < リチウム> < IMG SRC = "{DT_SKIN}ガイド/ guide1.jpg" /> </ 李> 
    < リチウム> < IMG SRC = "{} DT_SKINガイド/ guide2.jpg" /> </ 李> 
    < リチウム> < IMG SRC = "{DT_SKIN}ガイド/ guide3.jpg" /> </ 李> 
    < 李> <IMG SRC = "{DT_SKIN}ガイド/ guide4.jpg" /> </ 李>
    < リチウム> < IMG SRC = "{DT_SKIN}ガイド/ guide5.jpg" /> </ 李> 
    < リチウム> < IMG SRC = "{DT_SKIN}ガイド/ guide6.jpg" /> </ 李> 
    < 李> < IMG SRC = "{DT_SKIN}ガイド/ guide7.jpg" /> </ 李> 
</ UL >

{DT_SKIN} デフォルトスキンのアドレスを示すラベルのDestoonテンプレートは、独自のディレクトリパスに置き換えることができます。

CSSのセクション

.guide_imgs { 
    位置：絶対。
    Zインデックス：9999; 
    幅：100％; 
    高さ：100％; 
    オーバーフロー：隠されました; 
} 
.guide_imgsリー{ 
    幅：100％。
    高さ：100％; 
} 
のLiを.guide_imgs：最初の子{ 
    位置：絶対。
    右：0; 
    幅：100ピクセル; 
    高さ：60PX; 
} 
.guide_imgsのLi IMG { 
    幅：100％;高さ：100％。
} 
</ スタイル>

jQueryの一部

。$（ 'guide_imgs李'）（関数（）{をクリック
    するif（$（この）.hasClass（'近い'））{ 
        $（この）.parentを（）のremove（）; 
    }他{ 
        $（この） .remove（）; 
    } 
}）。

それは、HTMLページにjQueryのライブラリファイルを紹介するので、自然、jQueryのを使用していますので、それ以外の場合はエラーになります。

私の例では、それによって次のページの切り替えの効果を達成、現在のページを削除します絵のガイドをクリックしてください。そして、個別に（使用「スキップ」ボタンを定義し  class 、すべてのイメージ誘導、出口ガイドページを削除]をクリックし、ガイドページの最上部の右側にある値を区別するために）、。

この考え方で行くには、あなたはまた、ボタンの他のタイプを定義することができますが、前のページを参照する必要がある場合、不適切な方法を導くために、現在の画像を削除します。この場合には、CSSスタイルの使用を検討  display:none と  display:block 、表示切替をもjQueryのに使用することができる  show() と  hide() 表示を切り替える方法。

ドキュメントの現在のページがあること、目に見える画面の高さの高さを超える可能性がある考えると、ページのスクロールバーの存在が、あなたは同時にするには、起動ページを表示することができます  body 追加し  overflow:hidden 、スクロールバーをキャンセルします。

フルバージョン

< UL クラス= "guide_imgs" > 
    < リチウムのクラス= "close_guide" > </ 李> 
    < リチウム> < IMG SRC = "{DT_SKIN}ガイド/ guide1.jpg" /> </ 李> 
    < リチウム> < IMG SRC = "{} DT_SKINガイド/ guide2.jpg" /> </ 李> 
    < リチウム> < IMG SRC = "{DT_SKIN}ガイド/ guide3.jpg" /> </ 李> 
    < 李> <IMG SRC = "{DT_SKIN}ガイド/ guide4.jpg" /> </ 李> 
    < 李> < IMG SRC = "{DT_SKIN}ガイド/ guide5.jpg" /> </ 李> 
    <！ - <LI> <IMG SRC = "{DT_SKIN}ガイド/ guide6.jpg" /> </李> - > 
    < リチウムのクラス= "last_guide" > < IMG SRC = "{DT_SKIN}ガイド/ guide7.jpg" /> </ 李> 
    < リチウムのクラス= "prev_guide" > </ 李> 
</ UL >

.guide_imgs { 
    位置：絶対。
    z屈折率：99999。
    幅：100％; 
    高さ：100％; 
    オーバーフロー：隠されました; 
} 
.guide_imgsリー{ 
    幅：100％。
    高さ：100％; 
} 
のLiを.guide_imgs：最初の子{ 
    位置：絶対。
    右：0; 
    幅：100ピクセル; 
    高さ：60PX; 
} 
最後の子{：リチウム.guide_imgs 
    位置を絶対。
    右：154px; 
    下：14px; 
    幅：128px; 
    高さ：60PX; 
    / *ボーダー：1ピクセル固体＃FF0000; * / 
} 
.guide_imgsのLi IMG { 
    幅：100％;高さ：100％。
}

。$（ 'guide_imgs李'）をクリックします（関数（）{ 
    場合（$（この）.hasClass（' close_guide'））{ 
        $（この）.parent（）削除を（）; 
    }それ以外の場合（$（この）.hasClass（ 'prev_guide'））{ 
        $（ 'prev_show。 '）を表示（）removeClass（' prev_show '）PREV（）addClass（' prev_show'）;。。。。
    }他{ 
        $（この）.prev（ ）.removeClass（ 'prev_show'）; 
        $（この）.addClass（ 'prev_show'）; 
        $（この）.hide（）; 
        （$（この場合）.hasClass（ 'last_guide'））{ 
            $（この）。親（）を除去（）; 
        } 
    } 
}）。

追加の必要がボタンの右下隅の前の位置、追加  class　分岐判断と使用を  hide（） 、および  show() スイッチの表示に。

以下は、達成すべき案内図の一例です。