jQuery 플러그인 확장기는 이미지 뒤집기 효과를 구현합니다_jquery

jQuery 이미지를 기반으로 한 팝업 뒤집기 효과 코드를 공유해 보세요. 이는 다운로드할 수 있는 6가지 마우스 클릭 그림 팝업 효과가 포함된 jQuery HTML5를 기반으로 구현됩니다. 렌더링은 다음과 같습니다.

CSS와 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 코드

코드 복사 코드는 다음과 같습니다.

!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") "?" (새 날짜).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 "?" (새 날짜).getTime()),c .append(d)}else c.append($(this).clone());c.data("옵션",b),c.data("원본",{parent:$(this),위치: $(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("컨테이너" ))}),$(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%",높이:"100%"});else{var b=$(this).data("원본");$(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({위치:"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 코드:

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

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.