Verwenden Sie jQuery, um die Focus Map Special Effects_jquery der offiziellen Apple-Website zu imitieren

Das jQuery-Fokusbild, das wir dieses Mal teilen möchten, ist etwas ganz Besonderes. Es sieht sehr einfach aus, ist aber auch ziemlich stimmungsvoll. Der Gesamtstil des Fokusbildes wird von Apple nachgeahmt. Aufgrund der Verwendung von jQuery müssen wir nur auf die Miniaturansicht unter dem Bild klicken, um den Fokusbildeffekt des Bildwechsels zu erzielen zur Verwendung auf Webseiten, die Videos anzeigen.

Als Nächstes teilen wir den Prozess und den Quellcode für die Implementierung dieses Apple-Fokusbilds.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"> width="920" style="max-width:90%" alt="Verwenden Sie jQuery, um die Focus Map Special Effects_jquery der offiziellen Apple-Website zu imitieren" src="img/sample_slides/info.jpg">

• 
• 
• 
• 

Wie aus dem obigen HTML-Code ersichtlich ist, besteht das gesamte Fokusbild aus einigen Divs, um den Bildcontainer zu bilden, und die Ul-Li-Liste wird verwendet, um das Miniaturbild unten zu bilden.

CSS-Code:

Code kopieren Der Code lautet wie folgt:

#Galerie{
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;
    /* CSS3 abgerundete Ecken */
    -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;
    border:1px einfarbig weiß;
    Hintergrund:url(img/panel.jpg) wiederholen-x unten in der Mitte #ffffff;
    /* Die Breite der Galerie */
    Breite:920px;
    Überlauf:versteckt;
}
#Folien{
    /* Dies ist der Folienbereich */
    Höhe:400px;
    /* jQuery ändert die Breite später auf die Summe der Breiten aller Folien. */
    Breite:920px;
    Überlauf:versteckt;
}
.slide{
    float:left;
}
#menu{
    /* Dies ist der Container für die Miniaturansichten */
    Höhe:45px;
}
ul{
    margin:0px;
    padding:0px;
}
li{
    /* Jedes Miniaturbild ist ein Li-Element */
    Breite:60px;
    display:inline-block;
    Listenstil:none;
    Höhe:45px;
    Überlauf:versteckt;
}
li.inact:hover{
    /* Der inaktive Zustand, hervorgehoben bei Mouseover */
    Hintergrund:url(img/pic_bg.png) wiederholen;
}
li.act,li.act:hover{
    /* Der aktive Zustand des Daumens */
    Hintergrund:url(img/active_bg.png) no-repeat;
}
li.act a{
    Cursor:Standard;
}
.fbar{
    /* Der vertikale Balken ganz links neben dem ersten Miniaturbild */
    Breite:2px;
    Hintergrund:url(img/divider.png) no-repeat right;
}
li a{
    display:block;
    Hintergrund:url(img/divider.png) no-repeat right;
    Höhe:35px;
    padding-top:10px;
}
ein img{
    border:none;
}

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

jQuery代码：

复制代码 代码如下:

$(document).ready(function(){
    /* Dieser Code wird ausgeführt, nachdem das DOM vollständig geladen wurde */
    var totWidth=0;
    var positions = new Array();
    $('#slides .slide').each(function(i){
        /* Durchlaufe alle Folien und speichere ihre Gesamtbreite in totWidth */
        positions[i]= totWidth;
        totWidth = $(this).width();
        /* Das Positions-Array enthält den kommutativen Offset jeder Folie vom linken Teil des Containers */
        if(!$(this).width())
        {
            warning("Bitte geben Sie Breite und Höhe für alle Ihre Bilder ein!");
            return false;
        }
    });
    $('#slides').width(totWidth);
    /* Ändere die Breite des Cotnainer-Divs auf die exakte Breite aller Folien zusammen */
    $('#menu ul li a').click(function(e,keepScroll){
            /* Klicken Sie auf ein Miniaturbild */
            $('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);
            /* Starte die Gleitanimation */
            e.preventDefault();
            /* Verhindert die Standardaktion des Links */
            // Stoppen des automatischen Vorlaufs, wenn auf ein Symbol geklickt wurde:
            if(!keepScroll) clearInterval(itvl);
    });
    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* Markieren Sie beim Laden der Seite das erste Miniaturbild als aktiv */
    /*****
     *
     *    Automatisches Vorrücken aktivieren.
     *
     ****/
    var current=1;
    Funktion autoAdvance()
    {
        if(current==-1) return false;
        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] wird als keepScroll-Parameter der Click-Funktion in Zeile 28
übergeben         aktuell ;
    }
    // Die Anzahl der Sekunden, in denen der Schieberegler automatisch vorrückt:
    var changeEvery = 10;
    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
    /* Ende der Anpassungen */
});

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