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: 0; top: 0; z-index: 2; 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: 3; }
.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: 0; left: 0; }
.public_box_qiuqian .public_qb_ui li i.icon_top_right { background-position: -15px 0; top: 0; right: 0; }
.public_box_qiuqian .public_qb_ui li i.icon_bottom_left { background-position: -0 -16px; bottom: 0; left: 0; }
.public_box_qiuqian .public_qb_ui li i.icon_bottom_right { background-position: -16px -15px; bottom: 0; right: 0; }

images素材：

效果图：

转载于:https://www.cnblogs.com/huanghuali/p/6876794.html

jquery鼠标经过水平180度翻转效果相关推荐

基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
jQuery 鼠标悬停时放大图片的效果
鼠标经过图片上方时,放大图片 <style> ul,li{ list-style:none; float:left; } #pop{ position:absolute; top:200p ...
unity 图片旋转（180度翻转）
//水平翻转Texture2D HorizontalFlipTexture(Texture2D texture){//得到图片的宽高int width = texture.width;int heig ...
高通平台android7.1系统显示旋转180度
实现方法内核层修改 kernel\msm-3.18\arch\arm\boot\dts\qcom\dsi-panel-lm215w-lvds-1080p-video.dtsi增加qcom,mdss- ...
【MAPBOX基础功能】30、mapbox地图基础工具 - 将360度范围内的经纬度转换为180度范围
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
实现图片沿水平和竖直方向翻转（旋转180度）
相机旋转180度,为了不改变原有的算法,最好的方法是将图片旋转180,这样就和之前拍摄的图片一致了.最先想到的方法是在basler相机中设置,但只找到了ReverseX,不满足要求. 查阅左飞的图像处 ...
php 翻转180度,怎么把视频旋转90度、180度
很多手机或相机拍摄的时候视频被反转了,视频拷到电脑上,每次用播放器播放时都要进行画面翻转设置,但也没实质上旋转视频画面.怎么把视频旋转90度或180度后保存下来,方便视频上传.或视频刻录时能正常观看呢 ...
html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
otc机器人氩弧焊机_轻松搞定砂光机前后连线翻转！【富全智能】全自动180度圆筒式翻板机...
点击上方蓝字关注我们 ! 新时代人们之所以要广泛使用机器,是由于机器既能承担人力所不能或不便进行的工作,又能较人工生产改进产品的质量,特别是能够大大提升劳动生产率和改善劳动条件.因此好的木工机械设计 ...

jquery鼠标经过水平180度翻转效果

jquery鼠标经过水平180度翻转效果相关推荐

最新文章

热门文章