你的位置:首页 > 软件开发 > Java > 基于jQuery图片弹出翻转特效代码

基于jQuery图片弹出翻转特效代码

发布时间:2015-05-20 15:00:19
分享一款基于jQuery图片弹出翻转特效代码。这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载。效果图如下:在线预览 源码下载实现的代码。html代码: <section class="main&qu ...

基于jQuery图片弹出翻转特效代码

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

基于jQuery图片弹出翻转特效代码

在线预览    源码下载

实现的代码。

html代码:

 <section class="main">  <article>    <div class="imgContainer">      <h5>效果一</h5>      <img src='/images/loading.gif' data-original="images/chinaz.jpg"  data-expander='{animation:"default"}'>    </div>    <div class="imgContainer">      <h5>效果二</h5>      <img src='/images/loading.gif' data-original="images/chinaz.jpg"  data-expander='{animation:"diamond"}'>          </div>    <div class="imgContainer">      <h5>效果三</h5>      <img src='/images/loading.gif' data-original="images/chinaz.jpg"  data-expander='{animation:"turn3d"}'>    </div>    <div class="imgContainer">      <h5>效果四</h5>      <img src='/images/loading.gif' data-original="images/chinaz.jpg"  data-expander='{animation:"flip3d"}'>    </div>    <div class="imgContainer">      <h5>效果五</h5>      <img src='/images/loading.gif' data-original="images/chinaz.jpg"  data-expander='{animation:"rotate"}'>    </div>            <div class="imgContainer">      <h5>效果六</h5>      <img src='/images/loading.gif' data-original="images/chinaz.jpg"  data-expander='{animation:"fade"}'>          </div>  </article></section>

原标题:基于jQuery图片弹出翻转特效代码

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录