jQuery を使用して Apple 公式 Web サイトのフォーカス マップの特殊効果を模倣する_jquery

今回シェアしたいjQueryのフォーカス画像は非常にシンプルな見た目ですが、非常に雰囲気があります。フォーカス画像の全体的なスタイルは Apple によって模倣されており、jQuery を使用しているため、画像の下のサムネイルをクリックするだけで画像切り替えのフォーカス画像効果を実現できます。この jQuery フォーカス画像プラグインは非常に適しています。ビデオを表示する Web ページで使用します。

次に、この Apple フォーカス イメージを実装するプロセスとソース コードを共有しましょう。

HTML コード:

コードをコピーします コードは次のとおりです:

http://tutorialzine.com/2009/10/Beautiful-apple-gallery-slideshow/"> width="920" style="max-width:90%" alt="jQuery を使用して Apple 公式 Web サイトのフォーカス マップの特殊効果を模倣する_jquery" src="img/sample_slides/info.jpg">

• 
• 
• 
• 
  
  

上記の HTML コードからわかるように、フォーカス画像全体はいくつかの div で構成されて画像コンテナを形成し、ul li リストは以下のサムネイルを形成するために使用されます。

CSS コード:

コードをコピー

コードは次のとおりです:

#ギャラリー{
    /* CSS3 ボックスシャドウ */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;
    /* CSS3 角丸 */
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;
    ボーダー:1px 純白;
    背景:url(img/panel.jpg) リピート-x 中央下 #ffffff;
    /* ギャラリーの幅 */
    幅:920px;
    オーバーフロー:非表示;
}
#スライド{
    /* これはスライド領域です */
    高さ:400px;
    /* jQuery は後で幅をすべてのスライドの幅の合計に変更します。 */
    幅:920px;
    オーバーフロー:非表示;
}
.slide{
    float:left;
}
#メニュー{
    /* これはサムネイルのコンテナです */
    高さ:45px;
}
ウル{
    マージン:0px;
    パディング:0px;
}
リ{
    /* すべてのサムネイルは li 要素です */
    幅:60px;
    表示:インラインブロック;
    リストスタイル:なし;
    高さ:45px;
    オーバーフロー:非表示;
}
li.inact:ホバー{
    /* マウスオーバーで強調表示される非アクティブな状態 */
    背景:url(img/pic_bg.png) 繰り返し;
}
li.act,li.act:ホバー{
    /* 親指のアクティブ状態 */
    背景:url(img/active_bg.png) 繰り返しなし;
}
li.行為{
    カーソル:デフォルト;
}
.fbar{
    /* 最初のサムネイルの隣にある一番左の垂直バー */
    幅:2px;
    背景:url(img/divider.png) 繰り返しなし;
}
リア{
    表示:ブロック;
    背景:url(img/divider.png) 繰り返しなし;
    高さ:35px;
    パディングトップ:10px;
}
画像{
    境界線:なし;
}

CSS コードも非常に単純で、いずれも独自に設定されています。 jQuery代码：

复制代码代码如下:

$(document).ready(function(){
    /* このコードは DOM が完全にロードされた後に実行されます */
    var totWidth=0;
    var 位置 = new Array();
    $('#slides .slide').each(function(i){
        /* すべてのスライドをスキャンし、その累積幅を totWidth に保存します */
        位置[i]= totWidth;
        totWidth = $(this).width();
        /* 位置配列には、コンテナの左部分からの各スライドの相互オフセットが含まれます */
        if(!$(this).width())
        {
            alert("すべての画像の幅と高さを入力してください!");
            false を返します;
        }
    });
    $('#slides').width(totWidth);
    /* cotnainer div の幅を、すべてのスライドを合わせた正確な幅に変更します */
    $('#menu ul li a').click(function(e,keepScroll){
            /* サムネイルをクリック */
            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            var pos = $(this).parent().prevAll('.menuItem').length;
            $('#slides').stop().animate({marginLeft:-positions[pos] 'px'},450);
            /* スライドアニメーションを開始します */
            e.preventDefault();
            /* リンクのデフォルトのアクションを防止します */
            // アイコンがクリックされた場合に自動進行を停止します:
            if(!keepScroll) clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* ページの読み込み時に、最初のサムネイルをアクティブとしてマークします */
    /*****
     *
     * 自動前進を有効にします。
     *
     ****/
    var current=1;
    関数 autoAdvance()
    {
        if(current==-1) return false;
        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // 28行目のクリック関数のkeepScrollパラメータとして[true]が渡されます
        現在 ;
    }
    // スライダーが自動で進む秒数:
    varchangeEvery = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* カスタマイズの終了 */
});

これは焦点図の焦点であり、図のスライディングブロックのアニメーション境界線を完成させ、点を短縮した図をすぐに切り替えることができます。