代码简介：

jQuery精仿手机上的翻牌效果菜单，很平滑的动画翻牌效果，每点击一下菜单，就会翻去一下，貌似很灵敏的动作。注意：如果预览时没看到效果，请刷新一下页面，让jquery载入就行了，在实际使用时不会出现这种情况。

代码内容：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQuery精仿手机上的翻牌效果菜单_网页代码站(www.webdm.cn)</title>
  5. <style type="text/css">
  6. ul,li{list-style:none;padding:0;margin:0;}
  7. #btncell{width:300px;height:100px;border:1px solid #777;margin:50px auto;}
  8. #btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;}
  9. #btncell li a{display:block;height:28px;border:2px solid #333;text-decoration:none;
  10. width:50px;background:#888;overflow:hidden;position:absolute;left:25px;top:10px;}
  11. </style>
  12. <script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>
  13. <script language="javascript">
  14. var nummove=0;
  15. var numout=0;
  16. $(function(){
  17.     $("#btncell li").hover(
  18.         function(){
  19.         if(nummove==0)
  20.         {
  21.             nummove=1;
  22.             $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;});
  23.             $("a",this).animate({ height: "28px",top: "10px"}, 80);
  24.             $("a",this).css("background","yellow");
  25.         }
  26.             },
  27.             function(){
  28.             if(numout==0)
  29.             {
  30.             numout=1;
  31.             $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;});
  32.             $("a",this).animate({ height: "28px",top: "10px"}, 80);
  33.             $("a",this).css("background","#888");
  34.             numout=0;
  35.             }
  36.             }
  37.     )
  38.     $("#btncell li a").click(function(){
  39.         $(this).parents("li").css("z-index","2")
  40.         $(this).animate({ height: "558px",top: "-255px",width: "1000px",left: "-460px",
  41.                                 opacity: 'toggle',lineHeight: '558px',fontSize: '500px'}, 1000);
  42.         $(this).animate({ height: "28px",top: "10px",width: "50px",left: "25px",
  43.                                 opacity: 'toggle',lineHeight: '28px',fontSize: '12px'}, 400);
  44.         $(this).parents("li").css("z-index","1")
  45.     })
  46. })
  47. </script>
  48. </head>
  49. <body>
  50. 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。<ul id="btncell">
  51.   <li><a href="#">1</a></li>
  52.   <li><a href="#">2</a></li>
  53.   <li><a href="#">3</a></li>
  54.   <li><a href="#">4</a></li>
  55.   <li><a href="#">5</a></li>
  56.   <li><a href="#">6</a></li>
  57. </ul>
  58. </body>
  59. </html>

jQuery精仿手机上的翻牌效果菜单的更多相关文章

  1. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  2. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

  4. 高仿精仿手机版QQ空间应用源码

    说明:本次QQ空间更新了以前非常基础的代码 更新内容一 更新了登陆界面二  增加了输入时密码时和登陆成功后播放音频的效果三 增加了导航条渐隐的效果(和真实QQ空间的导航条一样,首先透明,当tablev ...

  5. 利用FluidMoveBehavior制作出手机通讯录平滑的效果

    最近学习Blend,原来Blend制作动画等效果非常棒.下面演示一下FluidMoveBehavior应用,利用Blend中行为中的FluidMoveBehavior制作出手机通讯录平滑的效果 1.在 ...

  6. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  7. Android桌面悬浮窗效果实现，仿360手机卫士悬浮窗效果

    大家好,今天给大家带来一个仿360手机卫士悬浮窗效果的教程,在开始之前请允许我说几句不相干的废话. 不知不觉我发现自己接触Android已有近三个年头了,期间各种的成长少不了各位高手的帮助,总是有很多 ...

  8. 完美高仿精仿京东商城手机客户端android版源码

    完美高仿精仿京东商城手机客户端android版源码,是从安卓教程网那边转载过来的,这款应用源码非常不错的,也是一个非常优秀的应用源码的,希望能够帮到学习的朋友. _js_op> <igno ...

  9. Jquery实现手机上下滑屏滑动的特效代码

    要引入两个jquery插件 可以去网上下载 <script src="jquery-1.11.1.min.js"></script><script s ...

随机推荐

  1. javascript 组件化(转载)

    这边只是很简陋的实现了类的继承机制.如果对类的实现有兴趣可以参考我另一篇文章javascript oo实现 我们看下使用方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  2. 安装iproute2

    yum install -y gcc bison flex #tar -xzf  iproute2-3.17.0.tar.gz #cd iproute2-3.17.0#sed -i '/^TARGET ...

  3. poj 1523 SPF(双连通分量割点模板)

    题目链接:http://poj.org/problem?id=1523 题意:给出无向图的若干条边,求割点以及各个删掉其中一个割点后将图分为几块. 题目分析:割点用tarjan算法求出来,对于每个割点 ...

  4. Mysql 数据锁与事务

    一.锁 常用命令 查看表的存储引擎:mysql> show create table myLock; 修改当前表的存储引擎:mysql> alter table myLock engine ...

  5. 使用SQLyog连接MySQL数据库

    [学习笔记]使用SQLyog连接MySQL数据库 一.使用SQLyog创建数据库用来管理学生信息 复制代码 1 #创建数据库student  2 DROP DATABASE IF EXISTS Mys ...

  6. 题解 P1208 【[USACO1.3]混合牛奶 Mixing Milk】

    其实根本没有一楼dalao描述的那么麻烦...... 一楼dalao其实吧,采用了一种纯属模拟的方式. 下面是我的大跃进思想 但是一个个地做减法是不是太慢了?(大跃进思想) 于是我们是不是可以直接进行 ...

  7. BibTex相关

    标签(空格分隔): 杂七杂八的问题 又到了写论文的高峰期(?)在BibTeX中添加参考文献时,发现选项很多,对一些称呼还是一脸懵逼..阿一古,也许是最后一次写论文了,还弄清楚的还是清楚一下吧~ [转自 ...

  8. python参数传递方式

    原文地址:http://www.cnblogs.com/zhaopengcheng/p/5492183.html python中一切皆对象,函数中参数传递的是对象的引用. 1在函数中改变变量指向的对象 ...

  9. Backdooring a OS VM

    Backdooring a OS VM 来源   https://www.cnblogs.com/studyskill/p/6524672.html 提示: 1.经过实验,fortios 5.4 be ...

  10. Spring Security OAuth 个性化token

    个性化Token 目的 默认通过调用 /oauth/token 返回的报文格式包含以下参数 { "access_token": "e6669cdf-b6cd-43fe-a ...