jquery鼠标经过水平180度翻转效果
Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平翻转</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var aLi = $('.J_qiuqian_box .public_qb_ui li');
var aImg = $('.J_show_content');
var aSpan = $('.J_hide_content');
aLi.each(function(index){
$(this).mouseover(function(){
aSpan.eq(index).stop();
aImg.eq(index).stop();
aImg.eq(index).css({zIndex:1}).animate({
left:92,
width:0
},200,'',function(){
$(this).hide();
aSpan.eq(index).show().css({zIndex:2}).animate({
left:0,
width:184
},200)
})
})
$(this).mouseout(function(){
aSpan.eq(index).stop();
aImg.eq(index).stop();
aSpan.eq(index).css({zIndex:1}).animate({
left:92,
width:0
},200,'',function(){
$(this).hide();
aImg.eq(index).show().css({zIndex:2}).animate({
left:0,
width:184
},200)
})
})
})
})
</script>
</head>
<body>
<div class="public_box_qiuqian J_qiuqian_box">
<ul class='public_qb_ui'>
<li>
<a href="javascript:;"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>观音灵签</p>
<span><img src="data:images/qiuqian/icon01_guanyin.png" alt="观音灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>观音灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="javascript:;"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>吕祖灵签</p>
<span><img src="data:images/qiuqian/icon02_lvzu.png" alt="吕祖灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>吕祖灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="javascript:;"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>黄大仙签</p>
<span><img src="data:images/qiuqian/icon03_huangdaxian.png" alt="黄大仙签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>黄大仙签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="http://sc.chinaz.com"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>关帝灵签</p>
<span><img src="data:images/qiuqian/icon04_guandi.png" alt="关帝灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>关帝灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="javascript:;"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>妈祖灵签</p>
<span><img src="data:images/qiuqian/icon05_mazu.png" alt="妈祖灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>妈祖灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="#"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>诸葛测字</p>
<span><img src="data:images/qiuqian/icon06_zhuge.png" alt="诸葛测字" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>诸葛测字</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="#"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>月老灵签</p>
<span><img src="data:images/qiuqian/icon07_yuelao.png" alt="月老灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>月老灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="#"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>财神灵签</p>
<span><img src="data:images/qiuqian/icon08_caishen.png" alt="财神灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>财神灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
<li>
<a href="#"> </a>
<div class="content J_show_content">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>佛主灵签</p>
<span><img src="data:images/qiuqian/icon09_fozhu.png" alt="佛主灵签" /></span>
</div>
</div>
<div class="content J_hide_content hide">
<div class="content_bd">
<i class="icon_top_left"></i>
<i class="icon_top_right"></i>
<i class="icon_bottom_left"></i>
<i class="icon_bottom_right"></i>
<p>佛主灵签</p>
<span><img src="data:images/qiuqian/hover_shengbei.png" alt="圣杯" /></span>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
css样式：
* { margin: 0px; padding: 0px; }
li { list-style: none; }
.hide { display: none; }
.public_box_qiuqian .public_qb_ui { width: 690px; height: 100%; overflow: hidden; margin: 0 auto}
.public_box_qiuqian .public_qb_ui li { float: left; width: 186px; height: 232px; overflow: hidden; position: relative; margin: 10px 10px 0px 10px; }
.public_box_qiuqian .public_qb_ui li .content { width: 184px; height: 230px; position: absolute; left:; top:; z-index:; overflow: hidden; border: 1px solid #d6bd75; border-radius: 5px; background-color: #ffecb6; }
.public_box_qiuqian .public_qb_ui li .content p { color: #694225; text-align: center; font-size: 20px; margin-top: 5px; }
.public_box_qiuqian .public_qb_ui li .content span { display: block; width: 146px; height: 166px; overflow: hidden; margin: 0 auto; background: #ffecb6 url(../images/bg_qiuqian.jpg) no-repeat center center; }
.public_box_qiuqian .public_qb_ui li .content_bd { width: 170px; height: 214px; overflow: hidden; margin: 8px auto 0; border: 1px solid #d6bd75; }
.public_box_qiuqian .public_qb_ui li img { display: block; width: 146px; height: 166px; }
.public_box_qiuqian .public_qb_ui li a { width: 186px; height: 232px; position: absolute; left: 0px; top: 0px; z-index:; }
.public_box_qiuqian .public_qb_ui li i { display: block; position: absolute; background: url(../images/icon_huawen.jpg) no-repeat; width: 15px; height: 16px; overflow: hidden; }
.public_box_qiuqian .public_qb_ui li i.icon_top_left { background-position: 0 0; top:; left:; }
.public_box_qiuqian .public_qb_ui li i.icon_top_right { background-position: -15px 0; top:; right:; }
.public_box_qiuqian .public_qb_ui li i.icon_bottom_left { background-position: -0 -16px; bottom:; left:; }
.public_box_qiuqian .public_qb_ui li i.icon_bottom_right { background-position: -16px -15px; bottom:; right:; }
images素材：
效果图：
jquery鼠标经过水平180度翻转效果的更多相关文章
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- JQuery鼠标移到小图显示大图效果的方法
JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- jQuery 鼠标滑过及选中一行效果
/******* 表格效果 ********/ $("#gird_tbl tbody tr").live('mouseover', function () { $(this).ad ...
- Jquery鼠标悬停按钮图标动态变化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery支持mobile的全屏水平横向翻页效果
这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件. 该翻页插件能够使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果很不错. 在 ...
- jQuery 制作逼真的日历翻转效果的倒计时
在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...
- 基于jQuery遮罩图片hover翻转效果
基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div cla ...
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
随机推荐
- Linux实战教学笔记55：开源虚拟化KVM（三）管理虚拟网络
六,管理虚拟网络 [x] Linux网桥基本概念 [x] qemu-kvm支持的网络 [x] 向虚拟机添加虚拟网络连接 [x] 基于NAT的虚拟网络 [x] 基于网桥的虚拟网络 [x] 用户自定义的隔 ...
- U3D OnDrawGizmos
private void OnDrawGizmos() { Debug.Log("OnDrawGizmos"); Gizmos.DrawWireSphere(this.transf ...
- NavigationController.viewControllers
NSMutableArray *viewControllersArray = [NSMutableArray new]; // 获取当前控制器数组 for (CardLoanBaseT ...
- 规范抢先看！微信小程序的官方设计指南和建议
基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支 ...
- java web框架发展的新趋势--跨界轻型App
“跨界(cross over)在汽车界已然成风,将轿车.SUV.跑车和MPV等多种不同元素融为一体的混搭跨界车型,正在成为汽车设计领域的新趋势.从个人而言,当包容.多元的审美要求和物质要求越来越强烈时 ...
- Servlet小案例总结
亮点: 没有使用任何框架,视图层和业务层使用Servlet技术进行交互,持久层用java的jdbc工具类进行数据交互 较为底层,比较基础的工具类比较多,比如: BeanFactory工具类使用dom4 ...
- spring4-2-bean配置-10-通过FactoryBean配置bean
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk8AAAFHCAIAAAA3Hj/JAAAgAElEQVR4nO2dzdX0rA2Gp6asclwQTW
- CentOS 6.5 下安装 Sun JDK 1.7
下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 得到 jdk-7u51-l ...
- rocketmq配置项说明（对应版本：4.0.0-incubating）
Broker配置参数说明 自定义客户端行为 ※一些默认配置的源代码路径 org.apache.rocketmq.store.config --END--
- RMAN备份（转）
原文:http://blog.csdn.net/leshami/article/details/6032739 一.数据库备份与RMAN备份的概念 1.数据库完全备份:按归档模式分为归档和非归档 归档 ...