CSS to control the HTML Style

First look at Html:

<Divid = "photoShow">
<Divclass = "photo">

<Span> Zhang Nana, from South Korea </span>
</Div>
<Divclass = "photo">

<Span> My Digital Story </span>
</Div>
<Divclass = "photo">

<Span> I Don't Know What graph it is. </span>
</Div>
<Divclass = "photo">

<Span> I don't know my Logo or Studio misspelled. </Span>
</Div>
<Divclass = "photo">

<Span> Four Seasons chart. this is, but I cannot tell the differences between summer and autumn. </span>
</Div>
</Div>
</Div>
Then we will write a CSS to control the HTML style. CSS is a good choice. The effect is good:

# PhotoShow {
Border: solid 1px # C5E88E;
Overflow: hidden;/* the part where the image exceeds the DIV is not displayed */
Width: 580px;
Height: 169px;
Background: # C5E88E;
Position: absolute;
}
. Photo {
Position: absolute;
Top: 0px;
Width: 490px;
Height: 169px;
}
. Photo img {
Width: 490px;
Height: 169px;
}
. Photo span {
Padding: 5px 0px 0px 5px;
Width: 490px;
Height: 30px;
Position: absolute;
Left: 0px;
Bottom:-32px;/* the content is not displayed at the beginning */
Background: black;
Filter: alpha (opacity = 50);/* IE transparent */
Opacity: 0.5;/* FF transparent */
Color: # FFFFFF;
}
After completing the above preparations, we will start the jQuery code below.
First, perform initialization:

$ (Document). ready (function (){
Var imgDivs =$ ("# photoShow> div ");
Var imgNums = imgDivs. length; // number of images
Var divWidth = parseInt ($ ("# photoShow" ).css ("width"); // display width
Var imgWidth = parseInt ($ (". photo> img" ).css ("width"); // Image width
Var minWidth = (divWidth-imgWidth)/(imgNums-1); // display the display width of other images when one of the images is displayed
Var spanHeight = parseInt ($ ("# photoShow>. photo: first> span" ..css ("height"); // height of the Image Description
ImgDivs. each (function (I ){
((Imgdivs[i00000000.css ({"z-index": I, "left": I * (divWidth/imgNums )});
$ (ImgDivs [I]). hover (function (){
// Process the mouse entry
}, Function (){
// Process the mouse when it leaves
});
});
}); First, we define some variables for later use.

Then, an each () function is used to process events in each matching element. Here, each <div class = "photo"> element processes events separately.

Next, let's look at the following sentence in detail: Dimensions (imgdivs? I =}.css ({"z-index": I, "left": I * (divWidth/imgNums), "top ": "0px"}). CSS is used to control the layers and display positions of each image. Then, a hover () function is used to process the hover event of the mouse.

First, let's take a look at how the mouse goes into the image: $ (imgDivs [I]). hover (function (){
// $ (This). find ("img" example .css ("opacity", "1 ");
$ (This). find ("span"). stop (). animate ({bottom: 0}, "slow ");
ImgDivs. each (function (j ){
If (j <= I ){
$ (ImgDivs [j]). stop (). animate ({left: j * minWidth}, "slow ");
} Else {
$ (ImgDivs [j]). stop (). animate ({left: (J-1) * minWidth + imgWidth}, "slow ");
}
});
}, Function (){
// Process the event when the mouse leaves
}); Here, all the animation effects are implemented by modifying CSS using the animation () function to control the display position of elements.

Note that the stop () function is called before calling the animate () function. The stop () function is used to stop all running events of the current element.

J <= I is used to determine the line between the current image of the mouse hover and the image before the image and the image after the image.

The processing of mouse exit is similar. The complete code below is: $ (document). ready (function (){
Var imgDivs =$ ("# photoShow> div ");
Var imgNums = imgDivs. length; // number of images
Var divWidth = parseInt ($ ("# photoShow" ).css ("width"); // display width
Var imgWidth = parseInt ($ (". photo> img" ).css ("width"); // Image width
Var minWidth = (divWidth-imgWidth)/(imgNums-1); // display the display width of other images when one of the images is displayed
Var spanHeight = parseInt ($ ("# photoShow>. photo: first> span" ..css ("height"); // height of the Image Description
ImgDivs. each (function (I ){
((Imgdivs[i00000000.css ({"z-index": I, "left": I * (divWidth/imgNums )});
$ (ImgDivs [I]). hover (function (){
// $ (This). find ("img" example .css ("opacity", "1 ");
$ (This). find ("span"). stop (). animate ({bottom: 0}, "slow ");
ImgDivs. each (function (j ){
If (j <= I ){
$ (ImgDivs [j]). stop (). animate ({left: j * minWidth}, "slow ");
} Else {
$ (ImgDivs [j]). stop (). animate ({left: (J-1) * minWidth + imgWidth}, "slow ");
}
});
}, Function (){
ImgDivs. each (function (k ){
// $ (This). find ("img" example .css ("opacity", "0.7 ");
$ (This). find ("span"). stop (). animate ({bottom:-spanHeight}, "slow ");
$ (ImgDivs [k]). stop (). animate ({left: k * (divWidth/imgNums)}, "slow ");
});
});
});
});