Use jQuery to copy the focus chart of the official website of Apple _ jquery

Source: Internet
Author: User
This article mainly introduces the special effect of using jQuery to simulate the focus chart on the official website of Apple. it is very cool. if you need it, please refer to the jQuery focus chart we will share this time, it looks very simple, but quite atmospheric. The overall focus chart style is similar to the Apple style. due to jQuery's use, you only need to click the thumbnail below the image to achieve the focus chart effect of the image switch, this jQuery focus graph plug-in is very suitable for use on the production page.

Next we will share with you the process and source code for implementing this Apple focus chart.

HTML code:

The code is as follows:















From the preceding HTML code, we can see that the whole focus graph consists of some p to form the image container, and uses the ul li list to form the thumbnail below.

CSS code:

The code is as follows:


# Gallery {
/* CSS3 Box Shadow */
-Moz-box-shadow: 0 0 3px # AAAAAA;
-Webkit-box-shadow: 0 0 3px # AAAAAA;
Box-shadow: 0 0 3px # AAAAAA;
/* CSS3 Rounded Corners */
-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 solid white;
Background: url (img/panel.jpg) repeat-x bottom center # ffffff;
/* The width of the gallery */
Width: 920px;
Overflow: hidden;
}
# Slides {
/* This is the slide area */
Height: 400px;
/* JQuery changes the width later on to the sum of the widths of all the slides .*/
Width: 920px;
Overflow: hidden;
}
. Slide {
Float: left;
}
# Menu {
/* This is the container for the thumbnails */
Height: 45px;
}
Ul {
Margin: 0px;
Padding: 0px;
}
Li {
/* Every thumbnail is a li element */
Width: 60px;
Display: inline-block;
List-style: none;
Height: 45px;
Overflow: hidden;
}
Li. inact: hover {
/* The inactive state, highlighted on mouse over */
Background: url (img/pic_bg.png) repeat;
}
Li. act, li. act: hover {
/* The active state of the thumb */
Background: url (img/active_bg.png) no-repeat;
}
Li. act {
Cursor: default;
}
. Fbar {
/* The left-most vertical bar, next to the first thumbnail */
Width: 2px;
Background: url (img/pider.png) no-repeat right;
}
Li {
Display: block;
Background: url (img/pider.png) no-repeat right;
Height: 35px;
Padding-top: 10px;
}
A img {
Border: none;
}


CSS code is also very simple, but it is just some simple settings.

JQuery code:

The code is as follows:


$ (Document). ready (function (){
/* This code is executed after the DOM has been completely loaded */
Var totWidth = 0;
Var positions = new Array ();
$ ('# Slides. slide'). each (function (I ){
/* Traverse through all the slides and store their accumulative widths in totWidth */
Positions [I] = totWidth;
TotWidth + = $ (this). width ();
/* The positions array contains each slide's commulutative offset from the left part of the container */
If (! $ (This). width ())
{
Alert ("Please, fill in width & height for all your images! ");
Return false;
}
});
$ ('# Slides'). width (totWidth );
/* Change the cotnainer p's width to the exact width of all the slides combined */
$ ('# Menu ul li a'). click (function (e, keepScroll ){
/* On a thumbnail click */
$ ('Li. menuitem'). removeClass ('Act '). addClass ('inact ');
$ (This). parent (). addClass ('AC ');
Var pos = $ (this). parent (). prevAll ('. menuitem'). length;
$ ('# Slides'). stop (). animate ({marginLeft:-positions [pos] + 'px '}, 450 );
/* Start the sliding animation */
E. preventDefault ();
/* Prevent the default action of the link */
// Stopping the auto-advance if an icon has been clicked:
If (! KeepScroll) clearInterval (itvl );
});
$ ('# Menu ul li. menuItem: first'). addClass ('Act '). siblings (). addClass ('inact ');
/* On page load, mark the first thumbnail as active */
/*****
*
* Enabling auto-advance.
*
****/
Var current = 1;
Function autoAdvance ()
{
If (current =-1) return false;
$ ('# Menu ul li '). eq (current % $ ('# menu ul li '). length ). trigger ('click', [true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
Current ++;
}
// The number of seconds that the slider will auto-advance in:
Var changeEvery = 10;
Var itvl = setInterval (function () {autoAdvance ()}, changeEvery * 1000 );
/* End of mizmizations */
});

This is the focus of the focus chart. after completing the animation logic of the image slider, click the thumbnail to switch the image.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.