Heim > Web-Frontend > js-Tutorial > Hauptteil

Der jQuery-Plug-in-Expander implementiert die Bildumdrehungseffekte_jquery

WBOY
Freigeben: 2016-05-16 15:58:12
Original
1159 Leute haben es durchsucht

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>
Nach dem Login kopieren

expander.min.js-Code

Code kopieren Der Code lautet wie folgt:

!function(){function a(){var a=this;this.init=function(){$(document).ready(function(){var b=$("
");a.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: $(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(){a.pop($(this).data("container"))}),c.on(" click",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]").each (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(),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 > 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>

Nach dem Login kopieren

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>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage