代码简介：

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

代码内容：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery精仿手机上的翻牌效果菜单_网页代码站(www.webdm.cn)</title>

<style type="text/css">

ul,li{list-style:none;padding:0;margin:0;}

#btncell{width:300px;height:100px;border:1px solid #777;margin:50px auto;}

#btncell li{width:100px;float:left;height:50px;font-size:14px;text-align:center;line-height:28px;position:relative;z-index:1;}

#btncell li a{display:block;height:28px;border:2px solid #333;text-decoration:none;

width:50px;background:#888;overflow:hidden;position:absolute;left:25px;top:10px;}

</style>

<script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery.js"></script>

<script language="javascript">

var nummove=0;

var numout=0;

$(function(){

    $("#btncell li").hover(

        function(){

        if(nummove==0)

        {

            nummove=1;

            $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;});

            $("a",this).animate({ height: "28px",top: "10px"}, 80);

            $("a",this).css("background","yellow");

        }

            },

            function(){

            if(numout==0)

            {

            numout=1;

            $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;});

            $("a",this).animate({ height: "28px",top: "10px"}, 80);

            $("a",this).css("background","#888");

            numout=0;

            }

            }

    )

    $("#btncell li a").click(function(){

        $(this).parents("li").css("z-index","2")

        $(this).animate({ height: "558px",top: "-255px",width: "1000px",left: "-460px",

                                opacity: 'toggle',lineHeight: '558px',fontSize: '500px'}, 1000);

        $(this).animate({ height: "28px",top: "10px",width: "50px",left: "25px",

                                opacity: 'toggle',lineHeight: '28px',fontSize: '12px'}, 400);

        $(this).parents("li").css("z-index","1")

    })

})

</script>

</head>

<body>

预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。<ul id="btncell">

  <li><a href="#">1</a></li>

  <li><a href="#">2</a></li>

  <li><a href="#">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">6</a></li>

</ul>

</body>

</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. .NET 类库研究必备参考 添加微软企业库源码

    前不久,为大家提供了一个.NET 类库参考源码的网站,扣丁格鲁(谐音“coding guru”),使用了段时间,发现一些不方便的地方,特意做了一些更改,希望大家多提意见,下面是此次更改的地方. 更改1 ...

  2. windows下的C++ socket服务器（2）

    int main(int ac, char *av[]) { ); ) { exit(); } thread t; ) { int socket_fd = accept(tcp_socket, nul ...

  3. IIS8.5 的环境下添加配置WCF服务！！！！！

    添加步骤: 1.打开iis8.5,先部署wcf服务. 2.首先添加MIME类型 扩展名:“.svc” MIME类型:“application/octet-stream” 3.添加 处理程序映射 请求路 ...

  4. 最近JavaScript的一些收获

    开发习惯的上的收获 1,开发过程中,要让整个逻辑展示在一个函数中,中间部分则做可以考虑公用策略优化 2,开发完成至少有三个角度进行测试,正面方面和中立 开发技巧上面的收获 1,驼峰转为‘-’以及‘-’ ...

  5. [转帖]高通推出八核笔电处理器骁龙8cx 能超英特尔吗？

    高通推出八核笔电处理器骁龙8cx 能超英特尔吗? https://baijiahao.baidu.com/s?id=1619154699684981202&wfr=spider&for ...

  6. typescript 不用import?

    如果你想用ts文件,而又不想import,export,怎么办呢? 感谢开发者提供的工具.    https://github.com/domchen/typescript-plus.   感想: 仅 ...

  7. Redis和Memcache的区别总结-京东阿里面试

    集群: redis 和memcached都支持集群 数据类型 Redis支持的数据类型要丰富得多,Redis不仅仅支持简单的k/v类型的数据,同时还提供String,List,Set,Hash,Sor ...

  8. 内存映像分析工具Eclipse Memory Analyzer

    1. Eclipse Memory Analyzer安装 Help ->Eclipse Marketplace,搜索Memory,点击install,->confirm->同意证书内 ...

  9. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  10. 【BZOJ3622】已经没有什么好害怕的了（动态规划，容斥）

    [BZOJ3622]已经没有什么好害怕的了(动态规划,容斥) 题面 BZOJ 题解 很明显的,这类问题是要从至少变成恰好的过程,直接容斥即可. 首先我们要求的是(糖果>药片)=(药片>糖果 ...