分享一款基于jQuery图片弹出翻转特效代码。这是一款基于jQuery+HTML5实现的，里面包含六款不同效果的鼠标点击图片弹出特效下载。效果图如下：
引入CSS和JS
<link href="https://www.jb51.net/css/expander.css"> <link href="https://www.jb51.net/css/theme.css"> <script src="https://www.jb51.net/js/jquery-latest.min.js" type="text/javascript"></script> <script src="https://www.jb51.net/js/expander.min.js"></script>
expander.min.js代码
复制代码 代码如下:
!function(){function a(){var a=this;this.init=function(){$(document).ready(function(){var b=$("<div></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> <article> <div> <h5>效果一</h5> <img src="https://www.jb51.net/images/chinaz.jpg" data-expander='{animation:"default"}'> </div> <div> <h5>效果二</h5> <img src="https://www.jb51.net/images/chinaz.jpg" data-expander='{animation:"diamond"}'> </div> <div> <h5>效果三</h5> <img src="https://www.jb51.net/images/chinaz.jpg" data-expander='{animation:"turn3d"}'> </div> <div> <h5>效果四</h5> <img src="https://www.jb51.net/images/chinaz.jpg" data-expander='{animation:"flip3d"}'> </div> <div> <h5>效果五</h5> <img src="https://www.jb51.net/images/chinaz.jpg" data-expander='{animation:"rotate"}'> </div> <div> <h5>效果六</h5> <img src="https://www.jb51.net/images/chinaz.jpg" data-expander='{animation:"fade"}'> </div> </article> </section>