你的位置:首页 > Java教程

[Java教程]基于jQuery图片弹出翻转特效代码


分享一款基于jQuery图片弹出翻转特效代码。这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载。效果图如下:

在线预览    源码下载

实现的代码。

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>

js代码:

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");      }    });

via:http://www.w2bc.com/Article/39023