jQuery插件expander实现图片翻转特效

前端技术 2023/09/06 JavaScript

分享一款基于jQuery图片弹出翻转特效代码。这是一款基于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=$(\"<div class=\'expander-siv\'></div>\");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=$(\"<div data-expanderContainer></div>\");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代码：

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

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/16529

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案