Pengembang pemalam jQuery melaksanakan effect_jquery membalikkan imej

Kongsi kod kesan flip timbul berdasarkan imej jQuery. Ini dilaksanakan berdasarkan jQuery HTML5, yang mengandungi enam kesan pop timbul gambar klik tetikus berbeza untuk dimuat turun. Paparannya adalah seperti berikut:

Memperkenalkan CSS dan 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>

kod expand.min.js

Salin kod Kod adalah seperti berikut:

!function(){function a(){var a=this;this.init=function(){$(document).ready(function(){var b=$("495af2ecdf87f8bcdd15d941f6adfb5416b28748ea4df4d9c2150843fecfba68");a.siv=b,$("div.expander-siv").length||$("body").append(b),$("img[data-expander" ]").setiap(fungsi(){var c=$(this);c.attr("src",c.attr("src") "?" (Tarikh baharu).getTime()),c.load (function(){var b=$(this).attr("data-expander"),c=$("783f79e99a1cf7dac9454f25e6266ccc16b28748ea4df4d9c2150843fecfba68");if(c.addClass("expander -bekas"),b=b.ganti(/(['"])?([a-zA-Z0-9_] )(['"])?:/g,'"$2": '),b =b?JSON.parse(b):{},b.animation&&c.addClass(b.animation),b.theme||(b.theme="gelap",c.addClass("tema"),c.addClass ("gelap"),$("div.expander-siv").addClass("gelap"),$("div.expander-siv").addClass("tema")),b.speed||(b .speed="normal"),b.url){var d=$(this).clone();d.attr("src",b.url "?" (New Date).getTime()),c .append(d)}lain c.append($(this).clone());c.data("options",b),c.data("original",{parent:$(this),position: $(this).offset()}),c.css({kedudukan:"mutlak",lebar:$(this).outerWidth(),height:$(this).outerHeight(),top:$(this) .offset().atas,kiri:$(this).offset().kiri}),$(this).data("bekas",c),c.addClass("anim-" b.speed),$ ("body").append(c),$(this).on("click",function(){a.pop($(this).data("container"))}),c.on(" klik",function(){a.unpop($(this))})}),$(this).bind("expand",function(){a.pop($(this).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]").setiap (function(){if($(this).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(),atas:b.parent.offset().atas,kiri:b.parent.offset().kiri})}})}, 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("terbuka"),b.css({kedudukan:"mutlak",atas:$(tetingkap).scrollTop() "px",kiri:"0px",lebar:"100%",tinggi:" 100%"})},this.unpop=function(b){a.siv.removeClass("show");var c=b.data("original").parent;b.css({position:"mutlak ",top:c.offset().atas "px",kiri:c.offset().kiri "px",lebar:c.outerWidth() "px",height:c.outerHeight() "px"} ),b.removeClass("open")},this.init()}var a=new a}();

Kod JS:

<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>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.