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: ...
随机推荐
- 前端开发之JavaScript HTML DOM实战篇
实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- java 蓝桥杯算法提高 _3K好数
nums[i][j] 存的是i位数的时候,首位数字是j的K好数的数目,i从1位开始的结果,去算2位时的结果,去算3位时的结果...最后得到l位的结果.K进制只是一个范围. import java.ut ...
- Mesos的资源分配
Apache Mesos能够成为最优秀的数据中心资源管理器的一个重要功能是面对各种类型的应用,它具备像交警一样的疏导能力.本文将深入Mesos的资源分配内部, 探讨Mesos是如何根据客户应用需求,平 ...
- Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树
［抄题］: Given an array where elements are sorted in ascending order, convert it to a height balanced B ...
- MySQL5.6.35部署
1.下载软件 [root@localhost src]# wget -q http://mirrors.sohu.com/mysql/MySQL-5.6/mysql-5.6.35-linux-glib ...
- adf错误
1>无法验证事务处理中的所有行 运行项目报错: javax.faces.el.EvaluationException: oracle.jbo.TxnValException: JBO-27023 ...
- avalonjs 笔记
1>复选卡框和单选框 复选卡框 监控已选框的数组,即通过属性监控来判断是否全选 <div ms-controller="test"> <ul> < ...
- CDATA嵌套问题
在CDATA内部的所有内容都会被解析器忽略.一个 CDATA 部件以"<![CDATA[" 标记开始,以"]]>"标记结束.但是CDATA是不能够嵌 ...
- 如何让springmvc在启动的时候执行特定的业务处理
如何让springmvc在启动的时候执行特定的业务处理 java 的 web服务器启动时,经常会做一些特定的业务逻辑处理,比如数据库初始化, 初始化系统参数,读取配置文库等. 很多web服务的中间件, ...
- 样条曲线catmull rom转bezier
b0,..,b3是贝塞尔,c-1, c2是catmull rom控制点 [b0] = 1 [ 0 6 0 0] [c_1] [b1] - [-1 6 1 0] [c0] [b2] 6 [ 0 1 6 ...