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

最新推荐文章于 2018-12-29 12:28:27 发布
最新推荐文章于 2018-12-29 12:28:27 发布
阅读量447 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/huanghuali/p/6876794.html
版权

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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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

diebaiying3731
关注
[jQuery插件]jquery实现图片垂直水平翻转效果
12-22
jquery实现图片垂直水平翻转效果
jquery实现简单的图片翻转效果
sunflower_li的博客
03-16 8047
鼠标经过图片图片翻转显示图片背后的文字（对于其中引用的jquery文件、图片，需要用自己的）         Title             *{margin: 0;padding: 0;}         div{width: 284px;height: 430px;margin: 30px auto;border: 1px solid #ccc;}      
关于点击三角丝滑旋转180度css3 jq处理方法
热门推荐
zhaoshuang1010的专栏
10-20 2万+
1. 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转，怎么实现呢,需要css3搭配jq 来处理     如图： 2.html 标准点播-体验版              user-arrow"> 3.css  .user-arrow{//这是箭头的样式  width:12px; position:absolute; right:26px;
Jquery垂直/水平旋转
hins
08-12 3211
jquery制作图片垂直翻转动画特效 *{margin:0;padding:0;list-style-type:none;} a,img{border:0;text-decoration:none;} body{font:12px/180% Arial;} .brand a{ display: block; float: left; margin: 20px; width: 180
jquery鼠标悬停图片翻转效果特效代码
03-20
`将使图片沿着Y轴翻转180度，实现翻转效果。 如果你想让图片水平翻转，可以将`rotateY(180deg)`替换为`rotateX(180deg)`。此外，还可以调整翻转速度、角度以及其他CSS样式以适应不同的设计需求。 在提供的压缩包中...
jQuery鼠标经过图片翻牌切换特效代码
03-20
- 垂直翻转：通过`rotateX`函数实现，当鼠标经过图片时，图片沿着X轴翻转180度，达到正面变为反面的效果。 - 水平翻转：通过`rotateY`函数实现，图片沿着Y轴翻转，同样形成翻转效果。 5. **优化用户体验**： - ...
jquery鼠标悬停图片翻转效果.zip
07-04
本项目“jquery鼠标悬停图片翻转效果”利用jQuery实现了一个独特的交互功能，当用户将鼠标悬停在图片上时，图片会进行水平或垂直的翻转效果，增加了用户界面的动态感和趣味性。 1. **jQuery基础知识**： - jQuery...
仿当当网鼠标经过图片翻转jquery特效
03-28
在鼠标悬停时，我们可以通过设置`rotateY(-180deg)`使图片翻转180度，展现出图片的另一面。而在鼠标离开时，再恢复原状，即`rotateY(0deg)`。为了实现平滑的过渡，还可以使用`transition`属性设置动画时间，让图片...
jquery鼠标悬浮翻转缩略图
11-17
/* 180度翻转 */ } ``` 为了实现缩略图的缩放效果，我们可以使用CSS的`transition`属性，让翻转和恢复过程平滑过渡： ```css .thumbnail { transition: transform 0.5s; /* 0.5秒内完成变换 */ } ``` 至于...
jq垂直水平翻转效果
11-05
使用jquery插件制作的鼠标移入图片水平或垂直翻转的效果
jQuery/CSS3图片翻转特效 可水平垂直翻转
08-23
这是一款基于jQuery和CSS3的图片翻转特效，每一张图片都有文字标题悬浮在图片上，点击切换按钮，每一张图片均会进行水平或者垂直翻转，翻转效果非常酷，有3D立体的视觉效果。CSS3的运用让这些图片都显得十分精神。
css3鼠标经过旋转效果
12-05
这是一款绚丽的插件效果，适用于移动端，谷歌浏览器，搜狐浏览器，IE8+
前端 图片旋转角度(如90,180,左转,右转)
Haibing的博客
11-28 1万+
function ImgRotate(rotateNum,i) {         $("#rotImg_" + i).rotate(rotateNum);     }     定义和用法 rotate() 方法旋转画布的坐标系统。 语法 rotate(angle) 参数 参数 描述 angle 旋转的量
jquery实现来回翻转效果
背着吉他的蝙蝠女侠的博客
12-16 2103
demo代码如下：   注意：是通过判断是否存在某种ID值，然后添加id实现的。 Document .box { width: 200px; height: 200px; position: relative; } .box1,.box2 { width: 200px; height: 200px; position: ab
jq实现旋转图片
weixin_43121104的博客
12-29 8696
html 第一种方法 var current = 0; $(".rotate").on("click",function(){ if(current==0){ $(".zzc-img img").css("transform","rotate(90deg)"); current=1; }else if(current==1){ $(".zzc-img img"
jquery 点击旋转效果，点击图片旋转360度
Jesse
01-17 8503
设置全局变量 var deg = 0; //旋转度数 var blok = true; //判断是否在动画，或者时间内 css: //图片内赋值css样式 transition:all 0.5s linear; jquery: if(blok){ //锁住判断 blok = false; deg += 360; s = 'rotate('+ deg +'deg)';
鼠标划过旋转180度并且切换图片
sunjunyue的博客
09-12 1713
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .test { width
jquery版:点击图片旋转
webfullstack的博客
10-12 3254
&lt;img src="***/15302547715b35d5b3cafc3.jpg" onclick="rotate(this)"&gt; function getmatrix(a,b,c,d,e,f){ var aa=Math.round(180*Math.asin(a)/ Math.PI); var bb=Math.round(180*M...
jQuery实现图片鼠标经过圆角效果及弹层功能
本篇文章主要介绍了一款基于jQuery实现的鼠标经过方形图片切换成圆边效果的特效代码。该特效适用于图片展示页面，通过JavaScript库jQuery提供交互性。当用户将鼠标移动到方形图片上时，图片边缘会呈现圆形过渡，营造...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值