你的位置:首页 > 软件开发 > Java > 基于jQuery遮罩图片hover翻转效果

基于jQuery遮罩图片hover翻转效果

发布时间:2015-05-23 00:00:13
基于jQuery遮罩图片hover翻转效果。这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效。效果图如下:在线预览 源码下载实现的代码。html代码:<div class="index_hd"> <di ...

基于jQuery遮罩图片hover翻转效果

基于jQuery遮罩图片hover翻转效果。这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效。效果图如下:

基于jQuery遮罩图片hover翻转效果

在线预览    源码下载

实现的代码。

html代码:

<div class="index_hd">  <div class="fr hd_r major-list-outer">    <ul class="major-list">      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1413775760-7544.jpg" width="294" height="267">          </span>          <span class="back-face to-left"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1400684346-4329.jpg" width="294" height="267">          </span>          <span class="back-face to-right"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1413775714-2418.jpg" width="294" height="267">          </span>          <span class="back-face to-top"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1411890878-8918.jpg" width="294" height="267">          </span>          <span class="back-face to-top"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1413775714-2418.jpg" width="294" height="267">          </span>          <span class="back-face to-top"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1400684434-4609.jpg" width="294" height="267">          </span>          <span class="back-face to-top"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1428032296-8158.jpg" width="294" height="267">          </span>          <span class="back-face to-top"></span>        </a>      </li>      <li class="major-item">        <a href="http://www.w2bc.com/">          <span class="txt-hide front-face">            <img src='/images/loading.gif' data-original="images/1405250374-3685.jpg" width="294" height="267">          </span>          <span class="back-face to-top"></span>        </a>      </li>    </ul>  </div></div>

原标题:基于jQuery遮罩图片hover翻转效果

关键词:jquery

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

可能感兴趣文章

我的浏览记录