基于jQuery遮罩图片hover翻转效果。这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效。效果图如下:
在线预览 源码下载
实现的代码。
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>
via:http://www.w2bc.com/Article/39562
原标题:基于jQuery遮罩图片hover翻转效果
关键词:jquery