JQuery practices image effects-zhuodi tornado and jquery practices
(-1) Preface
This idea was copied by others, but the code was coded by myself. First of all, I would like to pay tribute to this predecessor. I used chrome49, firefox43, IE9, and jquery3.0. Use the code to avoid taking words out of context.
The image resources used are on my Baidu cloud disk.
Http://yun.baidu.com/share/link? Consumer id = 710445916 & uk = 1302053889
Used to set the layer of the element. The higher the value, the higher the level. When the element overlaps, the larger value is displayed in front, the smaller value is displayed in the back, and the value is the same, the elements at the back of the DOM tree are displayed in front.
The z-index style does not change the position of an element in the DOM tree.
Note that this css style has browser compatibility issues. When the value is negative, events bound to elements are not triggered or transmitted. It's just because there are a few more points in firefox43...
B. overflowIt is used to process the situation where the child element exceeds the parent element boundary. When the value is den, the excess part is hidden.
C. positionIt is used to set the element Positioning method. The default value is static. When the value is not static, the top and left values are valid and become the positioning points of sub-elements.
When the value is fixed, the position does not change with the position of the scroll bar relative to the left vertex position of the browser's view.
The position values of the body and html elements are static and cannot be the positioning points of child elements. Therefore, when the position of the body element uses the default value, it is relative to the left vertex of the document displayed in the browser, because it usually does not set any border or margin for the body, so there is no difference.
D. Add a function to JQuery.(1) $. function name, column such as $. random, add to global
(2) $. fn. function name, column such as $. fn. centerPos, add to JQuery object
(1) html file<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = UTF-8>
<Script type = "text/javascript" src = "debug-jquery-3.0.0.js"> </script>
<Script type = "text/javascript" src = "base. js"> </script>
<Link rel = "shortcut icon" href = "favicon. ico" type = "image/x-icon">
<Title> for life </title>
<Style type = "text/css">
*
{
Margin: 0;
Padding: 0;
}
Body
{
Background: url ("bg.gif ");
Position: absolute;
}
# Container
{
Width: 902px;
Height: 470px;
Margin: 0 auto;
Position: fixed;
Border: 2px # fff solid;
Box-shadow: 1px, 1px, 3px #222;
}
# Area1
{
Width: 449px;
Height: 334px;
}
# Area2
{
Width: 451px;
Height: 165px;
Margin-left: 1px;
Margin-top: 1px;
}
# Area3
{
Width: 451px;
Height: 167px;
Margin-left: 1px;
Margin-top: 1px;
}
# Area4
{
Width: 192px;
Height: 135px;
Clear: left;
Margin-top: 1px;
}
# Area5
{
Width: 708px;
Height: 135px;
Margin-top: 1px;
}
# Container div
{
Float: left;
Position: relative;
Overflow: hidden;
}
# Container div img
{
Position: absolute;
// One of the prerequisites for z-index to take effect
}
</Style>
</Head
<Body>
<Button accesskey = "z" onclick = "document. location. reload ()"> refresh </button>
<! -Alt + z can refresh the page -->
<Div id = "container">
<! -Set the z-index style of the image in base. js -->
<Divid = "area1">
</Div>
<Divid = "area2">
</Div>
<Divid = "area3">
</Div>
<Divid = "area4">
</Div>
<Divid = "area5">
</Div>
</Div>
</Body>
</Html>
(2) js files$ (Function ()
{
// $ Starts with a JQuery object
Var $ container = $ ("# container "),
$ Areas = $ container. find ("div "),
MaxZindex = 9999;
$ Areas. bind ("mouseenter", function ()
{
Var index = $ (this). data ("index"), // The highest image index in the div
$ Imgs = $ (this). find ("img "),
Length = $ imgs. length,
$ Img = $ imgs. eq (index ),
Random = $. random (0, 7 ),
// Random is a custom method.
Css,
NextImg;
If (index = length-1)
{
NextImg = $ imgs. eq (0) [0];
}
Else
{
NextImg = $ imgs. eq (index + 1) [0];
}
NextImg. style. zIndex = maxZindex-1;
// Switch does not support implicit conversion. 0 and "0" do not match.
Switch (random)
{
Case 0: css = {top: "-" + $ img. height ()}; break;
Case 1: css = {left: "-" + $ img. width ()}; break;
Case 2: css = {top: $ img. height ()}; break;
Case 3: css = {left: $ img. width ()}; break;
Case 4: css = {top: "-" + $ img. height (), opacity: 0}; break;
Case 5: css = {left: "-" + $ img. width (), opacity: 0}; break;
Case 6: css = {top: $ img. height (), opacity: 0}; break;
Case 7: css = {left: $ img. width (), opacity: 0}; break;
}
$ Img. animate (css, "swing", function ()
{
This. style. top = "0px ";
This. style. left = "0px ";
This. style. zIndex = 1;
NextImg. style. zIndex = maxZindex;
If (random> 3)
{
Certificate (this).css ("opacity", 1 );
}
});
If (index = $ imgs. length-1) index =-1;
$ (This). data ("index", ++ index );
}). Each (function ()
{
$ (This). data ("index", 0); // index of the image with the highest level in the DOM tree
Var $ imgs = $ (this). find ("img ");
$ Imgs. each (function (index)
{
This. style. zIndex = maxZindex-index;
})
}). Bind ("click", function ()
{
$ Areas. trigger ("mouseenter ");
})
$ Container. centerPos (); // The element is horizontally and vertically centered relative to the browser's viewport
Window. onresize = function ()
{
// Dynamically change the position of an element as the browser's viewsize changes
$ Container. centerPos ();
}
})
// Generate values greater than or equal to min and less than or equal to max. The values are not in the filter array.
$. Random = function (min, max, filter)
{
Var I,
N = Math. floor (Math. random () * (max-min + 1) + min );
If (filter! = Undefined & filter. constructor = Array)
{
If (filter. constructor = Array)
{
For (I = filter. length-1; I>-1; I --)
{
If (n = filter [I])
{
N = Math. floor (Math. random () * (max-min + 1) + min)
I = filter. length;
}
}
}
Else
{
Window. console. warn ("the third parameter of random should be a one-dimensional array ");
}
}
Return n;
}
// The top and lef values are calculated based on the width and height of the parent element, that is, the parent element is the positioning point of the child element.
$. Fn. centerPos = function ()
{
Var parent;
This. each (function (index)
{
Parent = this. parentNode;
If (parent = document. body)
{
Parent = window;
}
Var position comment (this).css ("position ");
If (position = "fixed" | position = "absolute ")
{
Attributes (this).css ("left", ($ (parent). width ()-this. offsetWidth)/2 + "px ")
. Css ("top", ($ (parent). height ()-this. offsetHeight)/2 + "px ");
}
Else
{
Window. console. error ("no valid position value is set ");
}
})
Return this;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
