jquery Plugin expander realize picture flip effect _jquery

Share a pop-up flip effect code based on jquery images. This is based on JQUERY+HTML5 implementation, which contains six different effects of the mouse click on the picture pop-up effects download. The effect chart is 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 Code code as follows:

!function () {function A () {var a=this;this.init=function () {$ (document). Ready (function () {var b=$ ("<div class=" Expander-siv ' ></div> '); a.siv=b,$ ("Div.expander-siv"). length| | $ (' body '). Append (b), $ ("Img[data-expander]"). each (the 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, ' $ ': ', 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:$ (this). Offset ()}), C.css ({position: "absolute", width:$ (). Outerwidth (), Height:$ (This). Outerheight (), top:$ (a). Offset (). top,left:$ (This). Offset (). Left}), $ (this). Data ("container", c), C.addclass ("anim-" +b.speed), $ ("body"). Append (c), $ (a). On (' click ', Function () {A.pop ($ (this). Data ("container")) }), C.on ("click", Function () {A.unpop ($ ())}), $ (this). Bind ("Expand", Function () {A.pop ($ (). Data ("Container )), $ (this). Bind ("Retract", function () {A.unpop ($ (this). Data ("container")}), SetInterval (function () { A.relayout ()},2e3)}, $ (window). Resize (function () {a.relayout ()})},this.relayout=function () {$ ("div[ Data-expandercontainer] ". each (function () {if ($ (). Hasclass (" open ")) $ (this). CSS ({top:$ (window). scrolltop () +" Px ", left:" 0px ", Width:" 100% ", Height:" 100% "}); Else{var b=$ (this). Data (" original "); $ (this). CSS ({width: B.parent.outerwidth (), Height:b.parent.outerheight (), Top:b.parent.offset (). Top,left:b.parent.offset (). Left}}) },this.pop=function (b) {a.siv.removeclass (), A.siv.addclass ("Expander-siv"). AddClass ("theme"). AddClass (B.data (" Options "). Theme), A.siv.addclass (" show "), B.ADdclass ("open"), B.css ({position: "absolute", top:$ (window). scrolltop () + "px", Left: "0px", Width: "100%", Height: "100% "})},this.unpop=function (b) {A.siv.removeclass (" show "); var c=b.data (" original "). 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 A} ();

JS Code:

<script>
    var index = 0;
    var timeout = setinterval (function () {
      if (Index >) {
        window.clearinterval (timeout)
      }
      $ ("article "). EQ (index). addclass (" show ");
      index++
    }, +);

    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 the entire contents of this article, I hope you can enjoy.