基于jQuery遮罩图片hover翻转效果
2024-08-24 13:02:33
基于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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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
最新文章
- WPF - 属性系统 （3 of 4）
- OpenCASCADE View Manipulator
- linux应用程序开发-文件编程-库函数
- JSONP跨域数据调用
- 用VS连接oracle数据库时ORA-12504错误
- jdk的设置及安装android studio提示does not point to a valid jvm问题
- Android手势锁实现
- ServletInputStream的重复读取（多次读取）（转）
- C#中的委托,匿名方法和Lambda表达式
- UISearchBar去除背景颜色
- 父元素onmouseover触发事件在父子元素间移动不停触发的问题
- updatepanel的属性
- [Falcor] Return the data from server
- 搭建SSH环境之添加所需jar包
- NSFileHandle编写json数据格式
- [转]使用openssl库实现RSA、AES数据加密
- struts2中配置文件的调用顺序
- Linux下的一些常用命令（一）
- Hibernate中的实体规则、对象状态和进阶-一级缓存
- codeforces1101D GCD Counting 【树形DP】