代码简介：

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. DispatcherServlet的作用

    DispatcherServlet是前端控制器设计模式的实现,提供Spring Web MVC的集中访问点,而且负责职责的分派,而且与Spring IoC容器无缝集成,从而可以获得Spring的所有好 ...

  2. VMIC

    1. wmic 的简介 wmic -? [全局开关] <命令> 可以使用以下全局开关: /NAMESPACE 别名在其上操作的命名空间的路径. /ROLE 包含别名定义的角色的路径. /N ...

  3. 类似jq的即点即改

    <?php namespace app\controllers; use Yii;use yii\filters\AccessControl;use yii\web\Controller;use ...

  4. Java 使用 dom4j 读取 xml文档 demo

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://www. ...

  5. 聚合函数count里面加条件

    聚合函数中如果想汇总某一类数据,可以在括号中增加条件: sum(case when 字段>0 then 1 else 0 end) as 字段 *注意:count(case when 字段> ...

  6. Caffe使用step by step：r-cnn目标检测代码

    深度学习算法火起来之后,基于深度学习各种模型都如雨后春笋一般在各个领域广泛应用. 由于想把深度学习算法应用在在视频目标检测方向,得到一个较好的结果.由于视频数据的复杂性,因此使用深度学习算法在视频中的 ...

  7. Cron表达式简单的介绍

    1.Cron是什么,用来做什么的 根据百度百科的解释:计划任务,是任务在约定的时间执行已经计划好的工作,这是表面的意思.在Linux中,我们经常用到 cron 服务器来完成这项工作.cron服务器可以 ...

  8. nginx通过配置empty_gif解决请求favicon 404的问题

    背景介绍 因为一些浏览器在访问网站时会默认去请求网站的favicon,但是我的网站(Tengine)上并没有这些icon图片,因此在访问日志里会出现大量的404错误,会触发一些没必要日志告警.我们可以 ...

  9. Codeforces 893F（主席树+dfs序）

    在子树内和距离不超过k是一个二维限制,容易想到主席树,但主席树显然没法查最小值,因为不满足区间可减.kdtree和二维线段树可以干这事,但肯定会T飞.但事实上我们的问题有一个特殊性:对某个点x,查询其 ...

  10. shell的sort命令

    sort命令以行为单位对文本进行排序. 命令语法: sort [-b/d/f/g/i/M/n/r] [InFile] 参数解释: -b: ignore-leading-blanks,忽略前面空格符部分 ...