Gunakan jQuery untuk meniru peta fokus tapak web rasmi Apple special effects_jquery

Imej fokus jQuery yang kami ingin kongsikan kali ini sangat istimewa. Gaya keseluruhan imej fokus ditiru dalam gaya Apple Disebabkan penggunaan jQuery, kita hanya perlu klik pada lakaran kecil di bawah imej untuk mencapai kesan imej fokus daripada pemalam imej fokus jQuery ini sangat sesuai digunakan pada halaman web yang memaparkan video .

Seterusnya, mari kongsikan proses dan kod sumber untuk melaksanakan imej fokus Apple ini.

Kod HTML:

Salin kod Kod adalah seperti berikut:

http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"> width="920" style="max-width:90%" alt="Gunakan jQuery untuk meniru peta fokus tapak web rasmi Apple special effects_jquery" src="img/sample_slides/info.jpg">

• 
• 
• 
• 

Seperti yang dapat dilihat daripada kod HTML di atas, keseluruhan imej fokus terdiri daripada beberapa div untuk membentuk bekas imej, dan senarai ul li digunakan untuk membentuk lakaran kecil di bawah.

Kod CSS:

Salin kod Kod adalah seperti berikut:

#galeri{
    /* Bayang Kotak CSS3 */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    bayang kotak:0 0 3px #AAAAAA;
    /* Sudut Bulat CSS3 */
    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    jidar-bawah-kiri-jejari:4px;
    -moz-border-radius-kanan bawah:4px;
    -webkit-border-bottom-right-radius:4px;
    sempadan-bawah-kanan-jejari:4px;
    sempadan:1px putih pepejal;
    latar belakang:url(img/panel.jpg) ulang-x tengah bawah #ffffff;
    /* Lebar galeri */
    lebar:920px;
    limpahan:tersembunyi;
}
#slaid{
    /* Ini ialah kawasan slaid */
    ketinggian:400px;
    /* jQuery menukar lebar kemudian kepada jumlah lebar semua slaid. */
    lebar:920px;
    limpahan:tersembunyi;
}
.slaid{
    float:left;
}
#menu{
    /* Ini adalah bekas untuk lakaran kecil */
    ketinggian:45px;
}
ul{
    jidar:0px;
    padding:0px;
}
li{
    /* Setiap lakaran kecil ialah elemen li */
    lebar:60px;
    display:inline-block;
    gaya senarai:tiada;
    ketinggian:45px;
    limpahan:tersembunyi;
}
li.inact:tuding{
    /* Keadaan tidak aktif, diserlahkan pada tetikus di atas */
    latar belakang:url(img/pic_bg.png) ulang;
}
li.act,li.act:hover{
    /* Keadaan aktif ibu jari */
    background:url(img/active_bg.png) no-repeat;
}
li.bertindak{
    kursor:default;
}
.fbar{
    /* Bar paling kiri menegak, bersebelahan dengan lakaran kecil pertama */
    lebar:2px;
    latar belakang:url(img/divider.png) tiada ulangan kanan;
}
li a{
    paparan:blok;
    latar belakang:url(img/divider.png) tiada ulangan kanan;
    ketinggian:35px;
    padding-top:10px;
}
a img{
    sempadan:tiada;
}

CSS代码也非常简单，都是一些简单设置而已。

jQuery代码：

复制代码 代码如下:

$(dokumen).sedia(fungsi(){
    /* Kod ini dilaksanakan selepas DOM telah dimuatkan sepenuhnya */
    var totWidth=0;
    var positions = new Array();
    $('#slides .slide').setiap(fungsi(i){
        /* Lintas semua slaid dan simpan lebar terkumpulnya dalam totWidth */
        positions[i]= totWidth;
        totWidth = $(this).width();
        /* Tatasusunan kedudukan mengandungi setiap offset komulutatif slaid dari bahagian kiri bekas */
        if(!$(this).width())
        {
            alert("Sila, isikan lebar & tinggi untuk semua imej anda!");
            pulangkan palsu;
        }
    });
    $('#slides').width(toWidth);
    /* Tukar lebar div cotnainer kepada lebar tepat semua slaid digabungkan */
    $('#menu ul li a').klik(fungsi(e,keepScroll){
            /* Pada lakaran kenit klik */
            $('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);
            /* Mulakan animasi gelongsor */
            e.preventDefault();
            /* Halang tindakan lalai pautan */
            // Menghentikan auto-majukan jika ikon telah diklik:
            if(!keepScroll) clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* Pada pemuatan halaman, tandai lakaran kecil pertama sebagai aktif */
    /*****
     *
     *    Mendayakan auto-maju.
     *
     ****/
    var semasa=1;
    fungsi autoAdvance()
    {
        if(current==-1) return false;
        $('#menu ul li a').eq(current%$('#menu ul li a').panjang).trigger('klik',[true]);    // [true] akan dihantar sebagai parameter keepScroll bagi fungsi klik pada baris 28
        semasa ;
    }
    // Bilangan saat peluncur akan automajukan dalam:
    var changeEvery = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* Tamat penyesuaian */
});

这是焦点图的重点，完成了图片滑块的动画逻辑，点击缩略图即可切换图片。