JQuery plug-in expander for image flip Effect

JQuery plug-in expander for image flip Effect

This article will share with you a special image flip Effect Based on the jQuery plug-in expander. There are 6 different image flip styles, which are very cool. If you need them, refer to them.

Share a code that uses the jQuery image to bring up the flip effect. This is based on jQuery + HTML5, which contains six different effects of the mouse click image pop-up special effect download. As follows:

Introduce CSS and JS

?

1 2 3 4

<Link href = "css/expander.css" rel = "stylesheet"> <Link href = "css/theme.css" rel = "stylesheet"> <Script src = "js/jquery-latest.min.js" type = "text/javascript"> </script> <Script src = "js/expander. min. js"> </script>

Expander. min. js Code

Copy the Code as follows:

! Function () {function a () {var a = this; this. init = function () {$ (document). ready (function () {var B = $ ("

 

");. Siv = B, $ ("div. expander-siv "). length | $ ("body "). append (B), $ ("img [data-expander]"). each (function () {var c =$ (this); c. attr ("src", c. attr ("src") + "? "+ (New Date ). getTime (), c. load (function () {var B = $ (this ). attr ("data-expander"), c = $ ("

 

"); If (c. addClass (" expander-container "), B = B. replace (/(['"])? ([A-zA-Z0-9 _] +) (['"])? :/G, '"$2":'), B = B? JSON. parse (B): {}, B. animation & c. addClass (B. animation), B. theme | (B. theme = "dark", c. addClass ("theme"), c. addClass ("dark"), $ ("div. expander-siv "). addClass ("dark"), $ ("div. expander-siv "). addClass ("theme"), B. speed | (B. speed = "normal"), B. url) {var d = $ (this ). clone (); d. attr ("src", B. url + "? "+ (New Date ). getTime (), c. append (d)} else c. append ($ (this ). clone (); c. data ("options", B), c. data ("original", {parent: $ (this), position: partition (this).offset()}}),c.css ({position: "absolute", width: $ (this ). outerWidth (), height: $ (this ). outerHeight (),

Top: $ (this ). offset (). top, left: $ (this ). offset (). left}), $ (this ). data ("container", c), c. addClass ("anim-" + B. speed), $ ("body "). append (c), $ (this ). on ("click", function () {. pop ($ (this ). data ("container")}, c. on ("click", function () {. unpop ($ (this)}), $ (this ). bind ("expand", function () {. pop ($ (this ). data ("container")}, $ (this ). bind ("retract", function () {. unpop ($ (this ). data ("container")}), setInterval (function () {. reLayout ()}, 2e3)}), $ (window ). resize (function () {. reLayout ()}, this. reLayout = function () {$ ("div [data-expanderContainer]"). each (function () {if ($ (this ). hasClass ("open" has been written into (this).css ({top: $ (window ). scrollTop () + "px", left: "0px", width: "100%", height: "100%"}); else {var B = $ (this ). data ("original" contains invalid values (this%.css ({width: B. parent. outerWidth (), height: B. parent. outerHeight (), top: B. parent. offset (). top, left: B

. Parent. offset (). left}) }}, this. pop = function (B) {. siv. removeClass (),. siv. addClass ("expander-siv "). addClass ("theme "). addClass (B. data ("options "). theme),. siv. addClass ("show"), B. addClass ("open" example, B .css ({position :"

Absolute ", top: $ (window ). scrollTop () + "px", left: "0px", width: "100%", height: "100%"})}, this. unpop = function (B) {. siv. removeClass ("show"); var c = B. data ("original" 2.16.parent; B .css ({position: "absolute", top: c. offset (). top + "px", left: c. offset (). left + "px", width: c. outerWidth () + "px"

, Height: c. outerHeight () + "px"}), B. removeClass ("open")}, this. init ()} var a = new }();

 

JS Code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<Script> Var index = 0; Var timeout = setInterval (function (){ If (index> 10 ){ Window. clearInterval (timeout) } $ ("Article"). eq (index). addClass ("show "); Index ++ },300 );   Function showFoo (){ $ ("# FooId"). trigger ("expand "); }   $ ("# ExpandSettings"). on ("click", function (){ If ($ ("ul. settings"). hasClass ("open ")){ $ ("Ul. settings"). removeClass ("open "); } Else { $ ("Ul. settings"). addClass ("open ");   } }); </Script>

HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<Section class = "main"> <Article> <Div class = "imgContainer"> <H5> result 1 </Div> <Div class = "imgContainer"> <H5> result 2 </Div> <Div class = "imgContainer"> <H5> effect 3 </Div> <Div class = "imgContainer"> <H5> Result 4 </Div> <Div class = "imgContainer"> <H5> result 5 </Div> <Div class = "imgContainer"> <H5> result 6 </Div> </Article> </Section>

The above is all the content of this article. I hope you will like it.