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

分享一款基于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>

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