Teilen Sie einen Popup-Flip-Effekt-Code basierend auf einem jQuery-Bild. Dies wird auf Basis von jQuery HTML5 implementiert, das sechs verschiedene Mausklick-Bild-Popup-Effekte zum Herunterladen enthält. Das Rendering ist wie folgt:
Einführung in CSS und 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
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"> <h5>效果一</h5> <img src="images/chinaz.jpg" data-expander='{animation:"default"}'> </div> <div class="imgContainer"> <h5>效果二</h5> <img src="images/chinaz.jpg" data-expander='{animation:"diamond"}'> </div> <div class="imgContainer"> <h5>效果三</h5> <img src="images/chinaz.jpg" data-expander='{animation:"turn3d"}'> </div> <div class="imgContainer"> <h5>效果四</h5> <img src="images/chinaz.jpg" data-expander='{animation:"flip3d"}'> </div> <div class="imgContainer"> <h5>效果五</h5> <img src="images/chinaz.jpg" data-expander='{animation:"rotate"}'> </div> <div class="imgContainer"> <h5>效果六</h5> <img src="images/chinaz.jpg" data-expander='{animation:"fade"}'> </div> </article> </section>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.