jQuery实现个性翻牌效果导航菜单的方法

更新时间：2015年03月09日 15:51:11 作者：hcqenjoy

这篇文章主要介绍了jQuery实现个性翻牌效果导航菜单的方法,实例分析了jQuery操作animate、css及鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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个性翻牌效果的导航菜单</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<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="js/jquery1.3.2.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程序设计有所帮助。

您可能感兴趣的文章:

jQuery实现图片随机切换、抽奖功能(实例代码)
本文通过实例代码给大家介绍了jQuery实现图片随机切换、抽奖功能，感兴趣的朋友跟随小编一起看看吧
2019-10-10
jQuery 筛选器简单操作示例
这篇文章主要介绍了jQuery 筛选器简单操作,结合实例形式详细分析了jQuery筛选器针对元素、字符串、属性等操作常见技巧与操作注意实行,需要的朋友可以参考下
2019-10-10
jQuery EasyUI 布局之动态添加tabs标签页
本文给大家介绍jquery easyui布局之动态添加tabs标签页，实现思路是这样的通过调用add方法就可以轻松实现，本文分步骤给大家详细介绍，需要的朋友一起学习吧
2015-11-11
理解jQuery stop()方法
本文目的：为了了解stop()的用法，举个例子，直观的方式看看。非常的简单实用，有需要的小伙伴参考下
2014-11-11
jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页
displaynum，displaylastNum可以自由定制显示的页码数量
2008-12-12
使用jQuery制作遮罩层弹出效果的极简实例分享
这篇文章主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下
2016-05-05
JQuery实现列表中复选框全选反选功能封装(推荐)
在做列表时经常会遇到全选，反选进行批量处理问题。通过本文给大家介绍JQuery实现列表中复选框全选反选功能封装，对jq复选框全选反选功能感兴趣的朋友一起看看吧
2016-11-11
基于jquery异步传输json数据格式实例代码
这篇文章主要介绍了jquery异步传输json数据格式实例代码，有需要的朋友可以参考一下
2013-11-11
jquery修改属性值实例代码(设置属性值)
jQuery attr()方法用于设置/改变属性值，下面的例子演示如何改变（设置）链接中 href 属性的值
2014-01-01
jquery网页日历显示控件calendar3.1使用详解
这篇文章主要为大家详细介绍了jquery网页日历显示控件calendar3.1使用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11