The jQuery plug-in expander implements image flip effects,

The jQuery plug-in expander implements image flip effects,

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

<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 codeThe Code is as follows:
! Function () {function a () {var a = this; this. init = function () {$ (document ). ready (function () {var B =$ ("<div class = 'pander-siv'> </div>");. 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 = $ ("<div data-expanderContainer> </div>"); 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:

<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

<Section class = "main"> <article> <div class = "imgContainer"> 
The above is all the content of this article. I hope you will like it.