jQuery插件expander實現圖片翻轉特效

更新時間：2015年05月21日 10:45:44 投稿：hebedich

本文給大家分享的是一款基于jQuery插件expander實現圖片翻轉特效，一共有6種不同的圖片翻轉樣式，十分的炫酷，有需要的小伙伴可以參考下。

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

以上所述就是本文的全部內容了，希望大家能夠喜歡。

您可能感興趣的文章:

Jquery中LigerUi的彈出編輯框(實現方法)
本篇文章是對Jquery中LigerUi的彈出編輯框的實現方法進行了分析介紹，需要的朋友可以參考下
2013-07-07
jQuery導航條固定定位效果實例代碼
本篇文章主要介紹了jQuery導航條固定定位效果實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
通過jquery toggleClass()屬性制作文章段落更改背景顏色
jQuery制作文章段落更改背景顏色屬性jquery toggleClass()屬性。文中給大家附實例代碼和源碼，感興趣的朋友參考下吧
2018-05-05
jQuery Mobile 導航欄代碼
2013-11-11
jQuery實現簡單的回到頂部totop功能示例
這篇文章主要介紹了jQuery實現簡單的回到頂部totop功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下
2017-10-10
jQuery EasyUI API 中文文檔 - Spinner微調器使用
jQuery EasyUI API 中文文檔 - Spinner微調器使用，需要的朋友可以參考下。
2011-10-10
jQuery內容過濾選擇器用法示例
這篇文章主要介紹了jQuery內容過濾選擇器用法,結合實例形式分析了jQuery中使用contains、empty、has、parent等進行內容過濾的操作技巧,需要的朋友可以參考下
2016-09-09
淺析onsubmit校驗表單時利用ajax的return false無效問題
前幾天，在校驗一個表單數據用到ajax時，遇到 return false 無效問題,以下就是對這個問題進行了分析介紹，需要的朋友可以參考下
2013-07-07
jQuery實現滾動條滾動到子元素位置（方便定位）
本文主要介紹了jQuery實現滾動條滾動到子元素位置的方法。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
jQuery Json數據格式排版高亮插件json-viewer.js使用方法詳解
這篇文章主要為大家詳細介紹了jQuery Json數據格式排版高亮插件json-viewer.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06