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: ...
随机推荐
- Culling & Depth Testing
[Culling & Depth Testing] Culling is an optimization that does not render polygons facing away f ...
- Scala基础：数组（Array）、映射（Map）、元组（Tuple）、集合（List）
数组 package com.zy.scala object ArrayDemo { def main(args: Array[String]): Unit = { //定长数组 val arr1 = ...
- [hdu4347]The Closest M Points(平衡树式kdtree)
解题关键:模板题(结合起来了) #include<iostream> #include<cstdio> #include<cstring> #include< ...
- 商业级别Fortify白盒神器介绍与使用分析
转自:http://www.freebuf.com/sectool/95683.html 什么是fortify它又能干些什么? 答:fottify全名叫:Fortify SCA ,是HP的产品 ,是一 ...
- STREAMING #5 题解 3.高位网络
高维网络 [题目描述] 现在有一个 d 维的坐标网格,其中第 i 维坐标的范围是[0,a_i].在这个范围内建立一个有向图:我们把范围内的每个整点(每一维坐标均为整数的点)当做图上的顶点.设点 A(0 ...
- Python代码规范利器Flake8
写代码其实是需要规范的,团队中更是如此:不然 Google 也不会发布各种编码规范,耳熟能详的有Google C++ 风格指南,Google Python 风格指南,等等. 这些规范有用吗?有用也没用 ...
- ES5、6、7浅析
ECMA Script 它是一种由ECMA组织(前身为欧洲计算机制造商协会)制定和发布的脚本语言规范 而我们学的JavaScript是ECMA的实现, 但术语ECMAScript和JavaScript ...
- 项目中遇到的死锁问题： Lock wait timeout exceeded; try restarting transaction
最近项目中频繁出现 Lock wait timeout exceeded; try restarting transaction这个错误,把我们弄得痛苦不堪啊,为了解决问题,上网上找好多资料,终于把 ...
- .NET开源MSSQL、Redis监控产品Opserver之Exception配置
异常日志的记录和监控主要依赖于StackExchange.Exceptional组件,默认已经被引进来了. 先看下config文件夹下的ExceptionsSettings.json.example文 ...
- javascript总结50:认识instanceof 与 原型链
1 instanceof: 1.1 普通使用下: 判断一个对象是否是某个构造函数的实例: 语法 : 对象 instanceof 函数 是则返回true,不是则返回false. console.log( ...